更新记录

1.0.0(2023-06-10)

图片上传


平台兼容性

Vue2 Vue3
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.8.0 app-vue app-nvue
钉钉小程序 快手小程序 飞书小程序 京东小程序
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari

介绍

使用uni.chooseImage和uni.uploadFile实现 有上传进度、失败自动删除、预览功能

使用方法

组件引入

<b5-upload-img :upload-url="uploadUrl" :max-length="2" :img-list.sync="imgList"></b5-upload-img>

参数

uploadUrl:上传地址
uploadName: 上传文件二进制字段,默认file
maxLength: 最大数量
formData:二外数据
imgList: 图片列表,必须有url、status、key键,key为唯一标识,status为上传状态 1为成功 0为上传中(会显示process字段)。上传完成的返回值在data里面

自己可以遍历imgList 根据status或者data进行自己的判断

说明

上传成功的返回数据判断是写死的,可以查看代码uploadImg方法。 自己修改成需要的

if(redata.code === 1000){ // 判断是否成功
    const data = redata.data // 返回值
    this.updateImg(uniCode,{url:data.url,id:data.id,status:1,data:data})
}else{
   this.delImgByKey(uniCode)
   uni.showToast({
       title: redata.message || '上传失败', icon: 'none', mask: true,duration:2000
   })
}

隐私、权限声明

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

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

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

许可协议

MIT协议

暂无用户评论。

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