更新记录
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
})
}