![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/131344ac1d7f150de3a0fd776b1b159e.png)
<view class="mb-16 mt-32">
<van-uploader
file-list="{{ fileList }}"
max-count="5"
bind:after-read="afterRead"
preview-size="60"
bind:delete="del"
/>
<view class="size-26 gray-2">(上传凭证,最多5张)</view>
</view>
<!-- 提交 -->
<view class="submit fixed ptb-16 plr-24 fixed-bottom bg" bindtap="submit">
<van-button type="danger" round block size="large">提交</van-button>
</view>
import { http, uploadImage } from '../../utils/index'
data: {
fileList: [],
img: [],
},
async afterRead(event) {
const { file, index } = event.detail
this.setData({
[`fileList[${index}]`]: {
url: file.path,
status: 'uploading',
message: '上传中',
},
})
try {
const { data } = await uploadImage(file.path)
this.setData({
[`img[${index}]`]: JSON.parse(data).data.url,
[`fileList[${index}]`]: { url: file.path, status: 'success' },
})
} catch (err) {
this.setData({
[`fileList[${index}]`]: {
url: file.path,
status: 'failed',
message: '上传失败',
},
})
}
},
> bug:删除数组的方法splice,会直接改变原数组为删除后的数组,返回值是删除掉的那一项
del(event) {
const index = event.detail.index
this.data.img.splice(index, 1)
this.data.fileList.splice(index, 1)
this.setData({
img: this.data.img,
fileList: this.data.fileList,
})
},
submit() {
const { img } = this.data
},
export const uploadImage = tempFilePath => {
return wxp.uploadFile({
url: baseURL + '/weapp' + '/common/uploadali',
filePath: tempFilePath,
name: 'file',
formData: {
file: tempFilePath,
},
header: {
'Content-Type': 'multipart/form-data',
token: wx.getStorageSync('token'),
...headers,
},
})
}