vant上传组件van-uploader上传组件遇到的坑,上传多张图片顺序错乱问题,支持并行上传

2,218 阅读1分钟

问题描述: 移动端使用van-uploader上传组件遇到的坑,连续快速上传多个图片后可能会出现顺序错乱问题,尤其是拍照上传情况下

定位问题: 快速上传图片接口返回顺序与上传时存在不一致的情况(由于图片大小不一样、网络状况等原因)

:after-read="afterRead" // 缺少标识参数传递

解决方法: image.png 这是官方文档给到的内容,如果能在上传时传递参数标识,顺序就可以一一对应上了,此处上传采用二进制上传

 <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)
        }
 }