更新记录
1.0.6(2023-07-05)
下载此版本
1
1.0.5(2023-03-28)
下载此版本
1.更新预览效果
2.更新已知BUG
1.0.4(2022-12-13)
下载此版本
1.修改视频上传错误问题
2.修改文件大小限制问题
查看更多
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
HBuilderX 3.1.0 |
× |
× |
× |
× |
× |
× |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
鸿蒙元服务 |
× |
× |
× |
× |
× |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
× |
× |
× |
× |
× |
× |
× |
× |
× |
zq-upload-ts组件使用说明
-
兼容vue3 setup语法 ts
-
template代码:
<zq-upload-ts
:action="uploadUrl"
v-model:files="files"
:header="header"
:uploaded="uploadImg"
:fileType="['image','video']"
:count="9">
</zq-upload-ts>
solt说明
插槽名 |
说明 |
返回值 |
item |
单个文件整体自定义 |
item:file,index:number |
bar |
单个文件下方横条整体自定义 |
item:file,index:number |
progress |
进度条自定义 |
item:file,index:number |
addImage |
新增图片自定义 |
width:number(单个格子的宽度) |
addVideo |
新增视频自定义 |
width:number(单个格子的宽度) |
add |
头像自定义 |
width:number(单个格子的宽度) |
组件基本API参数
属性名 |
类型 |
默认值 |
必填 |
说明 |
files |
file[] |
[] |
否 |
文件列表 |
action |
string |
'' |
否 |
上传文件的url |
imageAction |
string |
'' |
否 |
上传图片文件的url,优先级高于action |
videoAction |
string |
'' |
否 |
上传视频文件的url,优先级高于action |
fileType |
string[] |
["image"] |
否 |
上传文件的类型,image 图片,video 视频,file 文件(未开放) |
name |
string |
file |
否 |
文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容 |
header |
any |
{} |
否 |
请求头 |
formData |
any |
{} |
否 |
上传文件时的数据 |
imageFormData |
any |
null |
否 |
上传图片文件时的数据,优先级高于formData |
videoFormData |
any |
null |
否 |
上传视频文件时的数据,优先级高于formData |
compressed |
boolean |
true |
否 |
视频是否压缩 |
sizeType |
string[] |
["original","compressed"] |
否 |
图片文件 original 原图,compressed 压缩图 |
sourceType |
string[] |
["album","camera"] |
否 |
文件来源 album 从相册选图,camera 使用相机 |
timeout |
number |
60 |
否 |
文件上传超时时间(未开放) |
asyn |
boolean |
false |
否 |
是否异步(未开放) |
uploaded |
Function |
(file:file,response:any):file=>{return file} |
是 |
文件上传后处理函数 |
preview |
Function |
null |
否 |
文件预览函数(内置暂时只支持图片) |
columnCount |
number |
1 |
否 |
文件每列个数 |
gutter |
number |
20 |
否 |
文件展示时的间隔,单位rpx |
addImageText |
string |
上传图片 |
否 |
上传图片按钮文字 |
addVideoText |
string |
上传视频 |
否 |
上传视频按钮文字 |
imageMode |
string |
aspectFill |
否 |
图片展示模式 |
maxSize |
number |
-1 |
否 |
文件上传是限制最大内存,-1不限制 |
maxDuration |
number |
30 |
否 |
视频文件上传最大时长,最长30 |
count |
number |
1 |
否 |
上传文件的最大数量 |
imageCount |
number |
null |
否 |
上传图片文件的最大数量,优先级高于count |
videoCount |
number |
null |
否 |
上传视频文件的最大数量,优先级高于count |
isProfile |
boolean |
false |
否 |
是否上传头像文件,默认只能一张 |
showBottom |
boolean |
true |
否 |
显示文件按钮 |
showRemove |
boolean |
true |
否 |
显示文件删除按钮 |
组件事件
事件名 |
说明 |
返回值 |
@update:files |
更新文件列表 |
files:file[] |
@success |
文件上传成功函数 |
files:file[],file:file |
@remove |
删除文件时调用的函数 |
files:file[],file:file |
@error |
文件上传失败函数 |
files:file[],file:file |
@change |
文件发生变化时调用的函数 |
files:file[] |