将文件转为base64上传

利用elementui的upload组件，实现文件上传

  <div class="group_title"
               style="display:flex">
            附件管理
            <el-upload ref="upload"
                       class="upload-demo"
                       action="http://localhost/HcmFile/api/File/Upload"
                       :headers="{Authorization:'Bearer '+ AccessToken}"
                       :data="uploadComput"
                       :file-list="fileList"
                       :show-file-list="false"
                       :auto-upload="true"
                       :on-success="uploadSuccess"
                       :before-upload="onChange2"
                       multiple>
              <el-button title="上传附件"
                         icon="el-icon-plus"
                         slot="trigger"
                         circle
                         plain
                         style="margin-left:20px"
                         size="mini"></el-button>
              <el-button title="删除"
                         icon="el-icon-delete"
                         circle
                         size="mini"
                         @click="delDown2"></el-button>
            </el-upload>
          </div>
          //附件上传之前执行的函数
    onChange2(v) {
      let s = v.name;
      let str = "";
      //去掉文件后缀
      if (s) {
        str = s.split(".");
        str.pop();
        str = str.join(",");
      }
      this.name = str;
      this.uploadComput = {
        type: "DB",
        tableName: "K_LEAVE",
        keyFieldValue: this.keyFieldValue,
        title: this.name,
        memo: "",
      };
      let promise = new Promise((resolve) => {
        this.$nextTick(() => {
          resolve(true);
        });
      });

      return promise;
    },
          
          //文件上传成功的钩子
    uploadSuccess(response, file, fielList) {
      this.$message.success("上传成功");
      this.loadGridx();
    },
           
      let promise = new Promise((resolve) => {
        this.$nextTick(() => {
          resolve(true);
        });
      });

      return promise;
    },





//先将文件转为base64再上传。
 <div class="group_title"
               style="display:flex">附件管理
            <el-upload class="upload-demo"
                       :headers="{Authorization:'Bearer '+ AccessToken}"
                       action
                       :auto-upload="false"
                       :show-file-list="false"
                       :data="{}"
                       :on-change="onChange">
              <el-button circle
                         icon="el-icon-plus"
                         title="上传附件"
                         slot="trigger"
                         plain
                         style="margin-left:20px"
                         size="mini"></el-button>
              <el-button circle
                         icon="el-icon-delete"
                         title="删除"
                         @click="delDown"
                         size="mini"></el-button>
            </el-upload>
          </div>
            methods: {
    //文件状态改变时的钩子，添加文件、上传成功和上传失败时都会调用
    onChange(v) {
      console.log(v);
      let name = v.name; //文件名
      let This = this;
      //初始化一个fileReader对象
      let reader = new FileReader();
      //将文件读取为base64形式
      reader.readAsDataURL(v.raw);
      //读取成功时触发，读取结果在实例的result中
      reader.onload = function (e) {
        This.uploadExcel(name, this.result);
        console.log(reader);
      };
    },
    //将文件转为base64格式
      uploadExcel(x, y) {
      let fileContent = y.split("base64,")[1];
      let arr = x.split(".");
      arr.pop();
      let name = arr.join(",");
      let obj = {
        name: name,
        fileName: x,
        content: fileContent,
      };
      this.fileData.push(obj);
      this.$message.success("上传成功");
    },
    //保存时上传文件
    //id是对应的请假记录的ID
    uploadFile(id) {
      this.fileData.forEach((item) => {
        let data = {
          base64FileData: item.content,
          base64FileName: item.name,
          keyFieldValue: id,
          tableName: "K_LEAVE",
          type: "DB",
        };
        api.fileUploadBase64(this, data);
      });
    },
    }

upload相关属性：
action:文件上传的后端地址。
data:文件上传附带的参数。
slot=“trigger”:设置触发的元素。
headers:请求头部。
multiple:是否支持多选。
auto-upload:是否选完文件立即上传。
show-file-list:是否显示已上传文件列表。
before-upload:上传文件之前的钩子函数。参数为上传的文件。返回promise为fulfilled则上传成功。
on-success:文件上传成功的钩子函数。
on-change:文件状态改变时的钩子函数，添加文件、上传文件和上传失败时都会调用。参数为文件、文件列表。