data() {
return {
fileList1: [],
img1: ''
}
},
// 删除图片
deletePic1(event) {
this[`fileList${event.name}`].splice(event.index, 1)
var arry =[]
this.fileList1.filter((v,i)=>{
arry.push(v.url)
})
this.img1 = arry
console.log(this.img1,"1");
},
// 新增图片
async afterRead1(event) {
// 当设置 mutiple 为 true 时, file 为数组格式,否则为对象格式
let lists = [].concat(event.file)
let fileListLen = this[`fileList${event.name}`].length
lists.map((item) => {
this[`fileList${event.name}`].push({
...item,
status: 'uploading',
message: '上传中'
})
})
for (let i = 0; i < lists.length; i++) {
const result = await this.uploadFilePromise1(lists[i].url)
let item = this[`fileList${event.name}`][fileListLen]
this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
status: 'success',
message: '',
url: result
}))
fileListLen++
}
var arry =[]
this.fileList1.filter((v,i)=>{
arry.push(v.url)
})
this.img1 = arry
console.log(this.img1,"1");
},
uploadFilePromise1(url) {
return new Promise((resolve, reject) => {
let a = uni.uploadFile({
url: '', //oss域名自己设
filePath: url,
name: 'file',
formData: {
user: 'test'
},
success: (res) => {
setTimeout(() => {
resolve(JSON.parse(res.data).data)
}, 1000)
}
});
})
},
<u-upload
:fileList="fileList1"
@afterRead="afterRead1"
@delete="deletePic1"
name="1"
:maxCount="1"
width="335"
height="180"
uploadText='营业执照'>
</u-upload>
以单张上传营业执照为例 主要是要对删除图片和新增图片的处理 后面加了数据处理更好的获取到上传后的图片img1
相比uview1.0来说代码量多了很多
代码中oss域名自己设