问题描述: 移动端使用van-uploader上传组件遇到的坑,连续快速上传多个图片后可能会出现顺序错乱问题,尤其是拍照上传情况下
定位问题: 快速上传图片接口返回顺序与上传时存在不一致的情况(由于图片大小不一样、网络状况等原因)
:after-read="afterRead" // 缺少标识参数传递
解决方法:
这是官方文档给到的内容,如果能在上传时传递参数标识,顺序就可以一一对应上了,此处上传采用二进制上传
<van-uploader
v-model="value"
accept="image/*"
:before-read="beforeRead"
:after-read="file => afterRead(file, 0)" //此处用number 也可用其他类型
/>
beforeRead() {
return true // 文件读取前的回调函数,返回 false 可终止文件读取
}
afterRead(
files: {
content: string
status: string
message: string
file: File
},
type: number
) {
try {
files.status = "uploading"
files.message = "上传中..."
const form = new FormData()
form.append("file", files.file)
const type = files.file.type
const name = files.file.name
const data = await upLoadImg(form) // 上传图片接口返回结果
files.status = "done"
files.message = ""
// 将blob转成文件
const file = new File([data.data], name, { type: type })
// 将blob转成base64
const reader = new FileReader()
reader.readAsDataURL(new Blob([data.data]))
reader.onload = e => {
const base64 = e.target.result
switch (type) {
case 0:
// do something
break
case 1:
// do something
break
case 2:
// do something
break
}
}
} catch (error) {
files.status = "failed"
files.message = "上传失败"
this.$message.error(error.message)
}
}