vue vant van-uploader 图片上传相关问题

            <van-uploader
               accept="image/png"
              :after-read="file => checkImg(file, 'logo')"
              style="width:239px;height:239px"
              :disabled="type === '3'"
            >
              <img
                :src="goodsHeadImg + '?' + new Date()"
                class="block"
                style="width:239px; height:239px"
              />
            </van-uploader>

 1.文件上传完毕后会触发 after-read 回调函数，获取到对应的 file 对象

若想after-read传递更多参数，可写成:after-read="file => checkImg(file, 'logo')这种格式

2.accept接受文件类型(accept="image/png"为只接受png格式文件)

3.:src=""绑定上传图片url 若修改同名文件后，页面未重新渲染图片，可给url加上时间戳

:src="goodsHeadImg + '?' + new Date()"

4.图片上传前检查图片宽高 

 async checkImg(file,type){
   let _this = this
    let arr = file.content.split(','), mime = arr[0].match(/:(.*?);/)[1],
            bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
        while (n--) {
            u8arr[n] = bstr.charCodeAt(n);
        }
       let f = new Blob([u8arr], { type: mime });
      var reader = await new FileReader();  
      reader.onload = function (e) {  
          let data = e.target.result;  
          let image = new Image();  
          image.onload=function(){  
      if(type==='logo'){
        if(image.width!==300||image.height!==300){
             MessageBox.alert('logo图片规格应为300*300')
             return false
        }else{
          _this.headImgUpload(file,type)
        }
      } else if (type==='top'){
        if(image.width!==750||image.height!==570){
             MessageBox.alert('logo图片规格应为750*570')
             return false
        }else{
          _this.headImgUpload(file,type)
        }
      }else if (type==='detail'){
        if(image.width!==750){
             MessageBox.alert('logo图片规格宽度应为750')
             return false
        }else{
          _this.headImgUpload(file,type)
        }
      }
          };  
          image.src= data;  
      } 
       reader.readAsDataURL(f); 
    },

 图片上传

    async headImgUploadConfig (file, index) {
      try {
        const formData = new FormData()
        formData.append('File', file.file)
        formData.append('goodsId', this.subGoodsInDtoList[index].subGoodsId)
        formData.append('goodsPicType', 'sub')
        const loading = this.$commLoading('正在上传图片，请稍后')
  
        await axios.create().post('/api/fileUpload', formData, {
          headers: { 'Content-Type': 'multipart/form-data' }
        })
          .then(result => {
            if (result.data.ROOT.BODY.RETURN_CODE === '0000') {
                 loading.close()
              if (result.data.ROOT.BODY.OUT_DATA.picUrl) {
                this.subGoodsInDtoList[index].subGoodsPic = result.data.ROOT.BODY.OUT_DATA.picUrl
                this.$forceUpdate()
                return Promise.resolve(result.data.realUrl)
              } else {
                  loading.close()
                MessageBox.alert(result.data.ROOT.BODY.RETURN_MSG)
              }
            } else {
              MessageBox.alert('调取服务失败')
            }
          })
      } catch (e) {
        console.error(e)
      }
    }