更新记录

1.0.6(2023-07-05) 下载此版本

1

1.0.5(2023-03-28) 下载此版本

1.更新预览效果 2.更新已知BUG

1.0.4(2022-12-13) 下载此版本

1.修改视频上传错误问题 2.修改文件大小限制问题

查看更多

平台兼容性

Vue2 Vue3
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[]

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问