标签：status Vant 更改 Uploader item file message 上传 deviceFile

图片允许多张上传，在使用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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。