vant的uploader上传图片遇到超时或则报错后页面图片的处理

vant图片上传报错或失败的处理

<template>
    <div>
        <van-cell required title=“事项图片” value=“(最多支持上传3张图片)” />
          <van-uploader
                  v-model="fileList"
                  :before-read="beforeRead"
                  :after-read="onReadIdCardback"
                  :before-delete="beforeDeleteBack"
                  :max-size="5*1024*1024"
                   multiple
                  :max-count="3"
                  @oversize="onOversize"
                  @click-preview="clickpreview"
          />
    </div>
</template>
<script>
export default {
     data() {
         return {
             fileList:[]，// 组件双向绑定的图片数组
             pictureList:[] // 给接口的图片数组
         }
     },
     methods:{
         // 图片上传
         onReadIdCardback(file,detail){
             let params=new FormData();
             params.append('file',file.file);
             params.append('isPermission','N');
             comApi.uploadFile(params)
             .then((res)=>{
                 if(res.status==200){
                     // 做修改页面时接收的数据也要做这个处理，删除图片时才不会出错
                     let picture={};
                     picture.index=detail.index // 添加index是为了方便删除时找到对应的图片，防止删除失效
                     picture.attachmentId=res.DATA.attachId;
                     picture.attachmentName=res.DATA.attachName;
                     // 清除图片的状态
                     file.status='done'
                     vm.fileList.push(picture)
                 }else{
                     file.status='failed';
                     file.message='上传失败';
                     vm.$toast.fail('上传失败')
                 }
             })
             .catch((err)=>{
                 // 如果图片上传失败，页面上图片则显示上传失败
                     file.status='failed';
                     file.message='上传失败';
                     vm.$toast.fail('上传失败')
             })
         },
         // 图片上传失败重新上传
         clickPreview(file,datail){
             let vm=this;
             if(file&&file.status==='failed'){
                 vm.$dialog.confirm({
                       message:'是否尝试重新上传？',
                       theme:'round-button',
                       canfirmButtonText:'重新上传',
                       cancelButtonText:'删除',
                       canfirmButtonColor:'black',
                       cancelButtonColor:'#ee0a24'
                 }).then(()=>{
                     // 点击提示确认调用上传图片方法再次上传图片
                     vm.onReadIdCardback(file)
                 }).catch(()=>{
                     // 点击删除提示是否删除
                     vm.$dialog.confirm({
                         message:'确定要删除图片吗？',
                     }).then(()=>{
                         vm.fileList.splice(datail.index,1)
                     }).catch(()=>{})
                 })
             }
           },

           // 删除图片
           beforeDeleteBack(file,datail){
               let vm=this
               return new Promise((resolve,reject)=>{
                      vm.$dialog.confirm({message:'无确定删除图片？'})
                      .then(()=>{
                          if(file.status!=="failed"){
                              vm.pictureList.forEach((item,index)=>{
                                          if(item.index==detail.index){   // 判断删除的下标是否正确
                                                    vm.pictureList.splice(index,1) // 使用遍历找到的index去数组里面删除
                                          }
                              })
                          }
                          vm.$toast.success('删除成功');
                          resolve()
                      })
                      .catch((err)=>{
                           vm.$toast.success('已取消');
                           reject(err)
                      })
               })
           }
     }
}
</script>