更新记录
1.0.6(2023-07-05) 下载此版本
1
1.0.5(2023-03-28) 下载此版本
1.更新预览效果 2.更新已知BUG
1.0.4(2022-12-13) 下载此版本
1.修改视频上传错误问题 2.修改文件大小限制问题
查看更多平台兼容性
uni-app
Vue2 | Vue3 | Chrome | Safari | app-vue | app-nvue | Android | iOS | 鸿蒙 |
---|---|---|---|---|---|---|---|---|
- | √ | - | - | - | - | - | - | - |
微信小程序 | 支付宝小程序 | 抖音小程序 | 百度小程序 | 快手小程序 | 京东小程序 | 鸿蒙元服务 | QQ小程序 | 飞书小程序 | 快应用-华为 | 快应用-联盟 |
---|---|---|---|---|---|---|---|---|---|---|
- | - | - | - | - | - | - | - | - | - | - |
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[] |