vant的uploader组件图片上传的一些问题

关于vant组件上传图片上遇到的一些问题

<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"
                  upload-text=“拍照上传"
                 multiple
                 :max-count="3"
                 accept="image/*"
                 @oversize="onOversize"
                 />
 //   capture=“camera"  这个属性是直接调取相机拍照，如果需要相册选择加拍照共同使用的话就不加这个属性就行了，我的项目需要相册和相机共同使用所以就没有加这个属性。

//  上传文件格式判定
 beforeRead(file){
          if(file.type==='image/jpeg'||file.type==='image/png'||file.type==='image/jpg'){
                 return true
           }
           this.$toast.fail(‘请上传正确格式的图片！')
          return false
},
// 文件上传大小限制
onOversize(file){
this.$toast.file(‘图片大小不能超过5M！')
},
// 文件上传
onReadIdCardBack(file){
          let params=new FormData();
          params.append('file',file.file);
          params.append('isPermission','N');
          this.$axios(params).then((res)=>{
                      // 根据自己的实际情况组装数据，我这里上传的文件需要图片的ID和name所以我就用一个对象picture装起来，
                      然后把数据push到pictureList数组中去
                       let picture={};
                       picture.attachmentId=res.data.DATA.attachId;
                       picture.attachmentName=res.data.DATA.attachName;
                       this.pictureList.push(picture)
          }).catch((e)=>{
          })
}，
// 照片文件删除
beforeDeleteBack(file,detail){
             return new Promise((resolve,reject)=>{
                        this.$dialog.confirm({
                                 message:’确定删除图片？'
                        }).then(()=>{
                                 this.pictureList.splice(detail.index,1)
                                 this.$toast.success(‘删除成功')
                                 resolve()
                        }).catch((error)=>{
                                 this.$toast.success(‘已取消')
                                reject(error)
                        })
             })
},
// 图片下载请求
downimgData(id){
              this.$axios(getImgByType('attach',id)).then((res)=>{
                        if(res.data){
                        // 这一步就是请求到图片数据然后获取图片路径push到渲染的数组中去
                              this.imgs.push(window.URL.createObjectURL(res.data));
                         // 这一步是先将图片上传v-model绑定的值置空
                              this.fileList=[];
                         // 遍历数组中的所有图片获取url路径，再将路径push到v-model绑定的数组中去，
                         这样数据就可以回填到图片上传的组件中去了，因为我这里的需求是点击上传图片的数据列表，
                         需要修改的数据点击会跳转的上传的界面对数据进行修改，
                         那么就需要把之前上传的图片回填到上传组件中来显示，
                         并可以进行删除修改等操作。根据组件的api显示这里需要将图片数据组装成数组里面是对象的形式，
                         并且对象的code是url，所以这里我根据自己的实际情况将数据处理成这样就可以回填了。
                              for(let i=0;i<this.imgs.length;i++){
                                    let img={};
                                    img.url=this.imgs[i];
                                    img.isImage=true;
                                    this.fileList.push(img)
                              }
                        }
              })
}