文件上传之压缩图片

compressFile() {
      const _this = this;
      const reader = new FileReader();
      reader.readAsDataURL(this.file); // 转base64
      const loading = this.$loading({
        target: document.querySelector("#box"),
        lock: true,
        text: "图片文件大于100M,自动压缩中...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      reader.onload = function (e) {
        const image = new Image(); // 新建一个img标签（还没嵌入DOM节点)
        image.src = e.target.result;
        image.onload = function () {
          const canvas = document.createElement("canvas"); // 新建canvas
          const context = canvas.getContext("2d");
          const imageWidth = image.width / 2; // 压缩后图片的大小
          const imageHeight = image.height / 2;
          let data = "";
          canvas.width = imageWidth;
          canvas.height = imageHeight;
          context.drawImage(image, 0, 0, imageWidth, imageHeight);
          data = canvas.toDataURL(_this.ft); // 输出压缩后的base64
          const arr = data.split(",");
          const mime = arr[0].match(/:(.*?);/)[1]; // 转成blob
          const bstr = atob(arr[1]);
          let n = bstr.length;
          const u8arr = new Uint8Array(n);
          while (n--) {
            u8arr[n] = bstr.charCodeAt(n);
          }
          _this.file = new window.File(
            [new Blob([u8arr], { type: mime })],
            _this.fileName,
            { type: _this.ft }
          ); 
          loading.close();
          _this.upLoadSub();
        };
      };
    },