elementUi手动上传图片

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

<template>
  <div>
    <el-upload
      ref="upload"
      class="upload-demo"
      action="#"
      :http-request="httpRequest"
      :before-upload="beforeUpload"
      :file-list="fileList"
      :show-file-list="false"
    >
      <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
      <el-button
        style="margin-left: 10px"
        size="small"
        type="success"
        @click="submitUpload"
        >上传到服务器</el-button
      >
      <div slot="tip" class="el-upload__tip">
        只能上传jpg/png文件，且不超过500kb
      </div>
    </el-upload>

    <img v-if="imgUrl" :src="imgUrl" alt="" />
  </div>
</template>

    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,
      });
    },