使用vant上传图片，并在获取到图片文件之后进行压缩上传

使用vant上传图片，并在获取到图片文件之后进行压缩上传

 afterRead(event) {
      console.log(event);
      if (/\/(?:jpeg|png)/i.test(event.file.type) && event.file.size > 500000) {
        // 创建Canvas对象(画布)
        let canvas = document.createElement("canvas");
        // 获取对应的CanvasRenderingContext2D对象(画笔)
        let context = canvas.getContext("2d");
        // 创建新的图片对象
        let img = new Image();
        // 指定图片的DataURL(图片的base64编码数据)
        img.src = event.content;
        // 监听浏览器加载图片完成，然后进行进行绘制
        img.onload = () => {
          // 指定canvas画布大小，该大小为最后生成图片的大小
          canvas.width = 400;
          canvas.height = 300;
          /* drawImage画布绘制的方法。(0,0)表示以Canvas画布左上角为起点，400，300是将图片按给定的像素进行缩小。
        如果不指定缩小的像素图片将以图片原始大小进行绘制，图片像素如果大于画布将会从左上角开始按画布大小部分绘制图片，最后的图片就是张局部图。*/

          context.drawImage(img, 0, 0, 400, 300);
          // 将绘制完成的图片重新转化为base64编码，file.file.type为图片类型，0.92为默认压缩质量
          console.log(event.file.type);
          event.content = canvas.toDataURL(event.file.type, 0.92);
          console.log(event.content);
          let config = {
            headers: {
              //添加请求头
              "Content-Type": "multipart/form-data"
            }
          };
          let file = this.dataURLtoFile(event.content, "image");
          // console.log(file)
          let params = new FormData();

          params.append("file", file);
          let url = `/service/wechart/auth/file/uploadOneImage`;
          this.$http({
            method: "POST",
            url: process.env.MOBILE_ROOT + url,
            data: params,
            config
          })
            .then(res => {
              if (res.code == 200) {
                this.fileList.push({
                  url: res.result.url
                });
                // Indicator.close();
              }
            })
            .catch(e => {});
        };
      } else {
        let config = {
          headers: {
            //添加请求头
            "Content-Type": "multipart/form-data"
          }
        };
        let params = new FormData();
        params.append("file", event.file);
        let url = `/service/wechart/auth/file/uploadOneImage`;
        this.$http({
          method: "POST",
          url: process.env.MOBILE_ROOT + url,
          data: params,
          config
        })
          .then(res => {
            if (res.code == 200) {
              this.fileList.push({
                url: res.result.url
              });
              // Indicator.close();
            }
          })
          .catch(e => {});
      }

      // } else {
      // 不做处理的jpg和png以及gif直接保存到数组
      //   if (this.imgBase64.length < 6) {
      //     this.imgBase64.push(file.content);
      //   }
      // }
    },
    // 将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 });
    },