uni.uploadFile(OBJECT) | uni-app官网
上传图片不能使用uni.request因为data参数不支持fromData数据格式
html
<template>
<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple :maxCount="4" width="180rpx" height="180rpx">
<div class="addPic flex justify-center align-center"><u-icon name="plus" :bold="true" color="#172B4D" size="56rpx"></u-icon></div>
</u-upload>
</template>
<script>
export default {
data() {
return {
fileList1: [],
}
},
methods:{
// 删除图片
deletePic(event) {
console.log(event);
this[`fileList${event.name}`].splice(event.index, 1)
},
// 新增图片
async afterRead(event) {
// 当设置 multiple 为 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.uploadFilePromise(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++
}
},
uploadFilePromise(url) {
console.log("url", url, typeof(url));
return new Promise((resolve, reject) => {
let a = uni.uploadFile({
url: `${config.baseUrl}/common/upload/uploadPicFile`, // 仅为示例，非真实的接口地址
filePath: url,
name: 'multipartFiles',//这个字段很重要，后端根据这个name获取二进制文件
formData: {
type: 11
},
success: (res) => {
console.log("图片接口res", res);
resolve(res.data.data)
}
});
})
},
}
}
</script>