vant 上传图片之前压缩后上传

vant上传图片 图片上传前压缩后再上传

最近开发中碰到这个问题，所以便记到这里

1. 首先是van-uploader组件使用

	<van-uploader
      v-model="fileList"
      multiple
      :max-count="1"
      capture
      :after-read="afterRead"
      @delete="deletes()"
    />
    //文件上传完毕后会触发 after-read 回调函数，获取到对应的 file 对象。
    //所以就在after-read 回调函数中对图片进行压缩后上传。

2. dataURLtoFile ： 封装的函数，用于将base64转为file

dataURLtoFile(dataurl, filename) {
     var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
         bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
      while(n--){
         u8arr[n] = bstr.charCodeAt(n);
      }
      return new File([u8arr], filename, {type:mime});
 },

3. 开始在after-read回调函数中进行压缩

afterRead(file) {
      console.log(file)
      // 图片大于500kb就压缩
      if (file.file.size > 512000) {
        let canvas = document.createElement('canvas') // 创建Canvas对象(画布)
        let context = canvas.getContext('2d')
        let img = new Image()
        img.src = file.content // 指定图片的DataURL(图片的base64编码数据)
        let files = file;
        img.onload = () => {
          canvas.width = img.naturalWidth / 4
          canvas.height = img.naturalHeight / 4
          context.drawImage(img, 0, 0, canvas.width, canvas.height)
          files.content = canvas.toDataURL(files.file.type, 0.92) // 0.92为默认压缩质量
          let myFile = this.dataURLtoFile(files.content, files.file.name)//dataURLtoFile为自己封装的函数，将base64转为file
          console.log(files)
          var formDatas = new FormData()
          formDatas.append('fileName', myFile)
          this.upload(formDatas)//上传的封装函数
        }
      } else { //小于10M直接上传
        var formData = new FormData()
        formData.append('fileName', file.file)
        console.log(formData)
        this.upload(formData)//上传的封装函数
      }
    },

ps：小白萌新，大佬勿喷