更新记录

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协议
评论列表 撰写评论
加载更多...
插件问答 我要提问

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

加载更多...