在使用Vant中Uploader过程中遇到的坑：图片状态更改等

图片允许多张上传，在使用file.status时总是不生效，直接跳转到成功状态，后来尝试加入了定时器；同时多张上传时采用判断数组的方式

 <van-uploader                 accept="*"                 v-model="fileList"                 multiple                 :max-count="4"                 :after-read="afterRead"                 :before-read="beforeRead"               />

在下方使用时：

    // 图片上传后回调     beforeRead(file) {       if (!file.type.startsWith('image') && !file.type.startsWith('video')) {         Toast.fail('请上传图片或视频')         return false       } else if (file.size > 104857600) {         Toast.fail('选择上传内容不能超过100M')         return false       } else {         return true       }     },     setUpload(file) {       let that = this       setTimeout(() => {         let config = {           headers: {             //添加请求头             'Content-Type': 'multipart/form-data',           },         }         let deviceFile = []         let params = new FormData()         if (Array.isArray(file)) {           //因为该组件单选是对象，多选是数组           deviceFile = file           console.log(deviceFile, 'deviceFile')         } else {           deviceFile.push(file)         }         deviceFile.map((item) => {           //files是后台参数name字段对应值           params.append('file', item.file)         })         // 文件上传状态         Toast('文件正在上传请等候，请收到上传成功提示后再关闭页面！')         //添加上传状态，避免用户在上传未完成时点击提交按钮         this.isLoading = false         // params.append('file', file.file)         this.$http({           // 这里填写的是上传接口的内容         })           .then((res) => {             if (res.data.code == 0) {               Toast.success('上传成功!')               // 文件成功状态               if (Array.isArray(file)) {                 file.forEach((item) => {                   item.status = 'done'                   item.message = '上传成功'                 })               } else {                 file.status = 'done'                 file.message = '上传成功'               }
              this.isLoading = true             }             res.data.data.map((item) => {               that.fileid.push(item.fileid)             })           })           .catch()         file.status = ''         file.message = ''       }, 1000)     },     afterRead(file) {       // 文件上传状态       if (Array.isArray(file)) {         file.forEach((item) => {           item.status = 'uploading'           item.message = '上传中...'           this.setUpload(file)         })       } else {         file.status = 'uploading'         file.message = '上传中...'         this.setUpload(file)       }     },

 

标签：status,Vant,更改,Uploader,item,file,message,上传,deviceFile
来源： https://www.cnblogs.com/superarchi/p/15953560.html