elementUi手动上传图片

在进行开发时候，使用elementUi框架upload上传图片时候，每次选取图片都会发送请求到服务器，我们想等点击确定按钮后，再进行上传到服务器，这时候我们就需要手动来上传图片。

    async submitUpload() {
    if (this.imgChange) {
     // 如果上传的文件改变了，执行文件上传方法获取新的地址
        this.form.bannerUrl = await this.uploadImg();
      }
      // 执行新增 *** 作 / 修改 *** 作
    },
    // 覆盖默认行为
    httpRequest() {
      this.imgChange = true;
    },
    // 上传之前
    beforeUpload(file) {
      const fileReader = new FileReader();
      // 将文件转为Base64
      fileReader.readAsDataURL(file);
      // 完成之后赋值
      fileReader.onload = () => {
        // 用于预览
        this.imgUrl = fileReader.result;
        this.form.bannerUrl = fileReader.result;
      };
    },
    async uploadImg() {
      // Blob
      const formData = new FormData();
      // 将之前转为base64的文件对象转回Blob并且添加到formdata里
      formData.append("file", this.dataURLtoBlob(this.form.bannerUrl));
      // 请求文件上传接口
      const res = await uploadFile(formData);
      // 请求成功后返回路径
      return res.fileName;
    },

    // base64转Blob
    dataURLtoBlob(dataurl) {
      var arr = dataurl.split(",");
      // 注意base64的最后面中括号和引号是不转译的
      var _arr = arr[1].substring(0, arr[1].length - 2);
      var mime = arr[0].match(/:(.*?);/)[1];
      var bstr = atob(_arr);
      var n = bstr.length;
      var u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new Blob([u8arr], {
        type: mime,
      });
    },