项目中上传文件，先本地上传，最后再执行真正上传

在vue项目中，有上传文件的需求时，先进行本地存储，等最后确定提交后，调用接口时再进行真正上传文件，可以减小服务器压力，减少占用空间，以避免多次重复上传。

示例效果为：

仅可支持.xlsx, .xls上传，点击上传出现文件名称（本地存储），最后确认提交时真正提交给后台

<el-form-item >
    <div><span style="color:#F56C6C;margin-right:4px;">*</span>请选择导入的Excel文件：</div>
    <div style="display:flex;">
         <div @click="handelup">
             <el-button type="primary">选择文件</el-button>
             <input style="display:none;" type="file" accept=".xlsx, .xls" ref="uploadFile" id="uploadFile" v-on:change="uploadFile">
         </div>
         <el-input v-model.trim="form.fileName" placeholder="未选择任何文件" disabled style="width:300px;margin-left: 16px;" ></el-input>
         <a href="https://xxx.xlsx" style="margin-left:10px;">
              <span class="underLine">下载模板</span>
         </a>
     </div>
</el-form-item>

import axios from "axios";

handelup(e) {
    this.$refs.uploadFile.dispatchEvent(new MouseEvent("click"));
},
uploadFile(e){
    this.form.fileName = e.target.files[0].name;
    // 获取待上传的文件对象
    let file = e.target.files[0];
    // 声明一个读取文件对象
    let reader = new FileReader();
    // 开始读取文件内容
    reader.readAsDataURL(file);
    // 读取操作结束时触发
    reader.onloadend = ev => {
        // 赋值给vue对象属性
        this.form.multipartFile = e.target.files[0];
    };
},
submitForm(){
    var formData = new FormData();
    formData.append("file", this.form.file);
    let config = {
        headers: {
            "Content-Type": "multipart/form-data"
        }
    };
    axios
    .post(accountDetailedProcessBacklog, formData, config)
    .then(res => {
         if (res.data.data.status == 1) {
              this.$message({
                message:`${this.action}成功`,
                type: 'success'
              });
            }else{
              this.$message({
                message:res.data.data.msg,
                type: 'error'
              });
            }
          })
          .catch(err => {});
}