先看效果
html模块
// 单张图片
<u-upload ref="uUpload" :file-list="fileList" :action="action" accept="image" :max-size="2 * 1024 * 1024" @oversize="oversize" :sizeType="sizeType"
:show-progress="false" :auto-upload="false" max-count="1" width="150" height="150" @on-choose-complete="afterRead">
</u-upload>
// 多张图片
<u-upload ref="uUploadMultiple" :file-list="multipleImgs" :action="action" accept="image" :max-size="2 * 1024 * 1024"
@oversize="oversize" :sizeType="sizeType" @on-remove="deleteImgs"
:show-progress="false" :auto-upload="false" max-count="9" width="150" height="150" @on-choose-complete="afterReadImgs">
</u-upload>
vue 代码段
// 参数
fileList: [], // 图片文件
multipleImgs: [], // 多张图片
action: '你的地址',
sizeType: ['compressed'],
// 方法段
// 文件超出大小限制
oversize() {
uni.showToast({
title: "图片最大不能超过2M",
icon: 'none'
})
},
// 读取文件 -- 单个
afterRead() {
this.multipleUpload(this.$refs.uUpload.lists, 0)
},
// 读取文件 多张图片上传
afterReadImgs(event) {
this.multipleUpload(this.$refs.uUploadMultiple.lists, 2)
},
// 多张图片上传
multipleUpload(event, type) {
let that = this;
let num = 9;
event.map(item => {
if (num === event.length) {
uni.showToast({
title: '最多上传9张图片',
icon: 'none'
})
return
}
num += 1
if(item.file){
that.uploadDo(item, type)
}
})
},
// 执行上传
uploadDo(event, type) {
let that = this;
uni.uploadFile({
url: "请求地址",
filePath: event.file.path,
name: 'uploadFile',
formData: {
user: 'test'
},
success(res) {
let resp = JSON.parse(res.data)
if (resp && resp.state === 200) {
let obj = {};
obj.url = that.requestUrl.api.fileUrl + resp.data.path
obj.name = '图' + that.avatar.length + 1
that.fileList= []
that.fileList.push(obj)
that.$refs.uUpload.clear()
}
}
});
},
// 删除店内图片
deleteImgs(index, lists, name) {
this.deleteDo(index)
},
// 执行删除
deleteDo(event) {
let that = this
let delList = this.multipleImgs.splice(event, 1)
let paths = delList.map(_ => _.url)
let params = {
pathList: paths
}
that.$ajax.post("删除图片接口", params).then(res => {
if (res.statusCode === 200 && res.data.state === 200) {
console.log("删除图片")
} else {
uni.showToast({
title: res.data.message,
icon: 'none'
})
}
})
},