vue代码上传文件后端需要formData格式，抛弃el-upload组件，仿照el-upload用原生上传

首先弹窗写好：
template部分：

<el-dialog
  title="申请结算"
  :visible.sync="dialogVisible"
  width="600px"
  custom-class="pushSettlement"
>
  <div>
    <el-form
      ref="form"
      :model="form"
      label-width="80px"
      style="width: 300px; margin: auto"
    >
      <el-form-item
        label="结算渠道"
        prop="channelName"
        :rules="{
          required: true,
          message: '请选择结算渠道',
          trigger: 'blur',
        }"
      >
        <el-select
          filterable
          v-model="form.channelId"
          placeholder="请选择结算渠道"
          @change="getchannelId($event, 1)"
        >
          <el-option
            v-for="item in channelSimpleList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <div class="uploadFile">
        <div class="flieIner" @click="uploadButton">
          <div class="imgOuter">
            <img
              style="margin-top: 38px"
              src="../../../assets/images/uploadpush.png"
              alt
            />
          </div>
          <h3 class="clickText">点击上传</h3>
          <p>支持扩展名：.xls .xlsx</p>
        </div>
        <input
          :value="inputFileValue"
          type="file"
          v-show="false"
          ref="fileInput"
          @change="fileInputChange"
        />
      </div>
      <div class="fileName" v-if="inputfile.name">
        <span><i class="el-icon-document"></i>{{ inputfile.name }}</span
        ><span
          @click="deletFile"
          @mouseover="delet = true"
          @mouseleave="delet = false"
          class="inconFile"
          ><i
            :style="delet ? '' : '    color: #67C23A;'"
            :class="delet ? 'el-icon-close' : 'el-icon-circle-check'"
          ></i
        ></span>
      </div>
    </el-form>
  </div>
  <div class="footer-dialog">
    <span @click="downDemo">下载模板</span>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button
        type="primary"
        @click="settlementSubmit"
        v-loading.fullscreen.lock="fullscreenLoading"
        >确 定</el-button
      >
    </span>
  </div>
</el-dialog>

点击叉号就会删除文件

template部分：
仿真element上传文件代码就是只有这部分：

	 <div class="uploadFile">
        <div class="flieIner" @click="uploadButton">
          <div class="imgOuter">
            <img
              style="margin-top: 38px"
              src="../../../assets/images/uploadpush.png"
              alt
            />
          </div>
          <h3 class="clickText">点击上传</h3>
          <p>支持扩展名：.xls .xlsx</p>
        </div>
        <input
          :value="inputFileValue"
          type="file"
          v-show="false"
          ref="fileInput"
          @change="fileInputChange"
        />
      </div>
      <div class="fileName" v-if="inputfile.name">
        <span><i class="el-icon-document"></i>{{ inputfile.name }}</span
        ><span
          @click="deletFile"
          @mouseover="delet = true"
          @mouseleave="delet = false"
          class="inconFile"
          ><i
            :style="delet ? '' : '    color: #67C23A;'"
            :class="delet ? 'el-icon-close' : 'el-icon-circle-check'"
          ></i
        ></span>
      </div>

script部分

		data() {
		    return {
		    delet: false,//是否删除，
		    dialogVisible: false,//弹窗得值
		    inputfile: "",//文件
 			 inputFileValue: "",//inputValue值
 			 fullscreenLoading: false,//上传文件后显示加载中转圈圈
		}

		 methods: {
		 	//点击按钮弹出弹窗前要处理一下值，你得点击事件是什么就写什么
			    applySettlement() {
			      this.dialogVisible = true;
			      this.inputfile = "";
			    },
			        //上传文件之前
					    beforeAvatarUpload(file) {
					      const isExele =
					        file.type === "application/vnd.ms-excel" ||
					        file.type ===
					          "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
					      const isLt2M = file.size / 1024 / 1024 < 20;
					      if (!isExele) {
					        this.$message.error("上传文件只能是 .xls /.xlsx 格式!");
					        this.inputFileValue = "";
					        this.inputfile = "";
					      }
					      if (!isLt2M) {
					        this.$message.error("上传文件大小不能超过 20MB!");
					        this.inputFileValue = "";
					        this.inputfile = "";
					      }
					      return isExele && isLt2M;
					    },
					     //触发input框
						    uploadButton(val) {
						      console.log(this.inputFileValue);
						      this.$refs["fileInput"].click();
						      this.inputFileValue = "";
						    },
						 //触发input框后获取文件
						    fileInputChange(e) {
						      console.log(e);
						      console.log(this.inputFileValue);
						      if (!this.beforeAvatarUpload(e.target.files[0])) return;
						      this.inputfile = e.target.files[0];
						    },  
						  //删除文件
						    deletFile() {
						      this.inputfile = {};
						      this.delet = false;
						    }, 
						        //确认申请订单结算
								    settlementSubmit() {
								    //判断不能为空
								      if (
								        this.inputfile == "" ||
								        this.inputfile == null ||
								        this.inputfile == undefined ||
								        this.form.channelId == "" ||
								        this.form.channelId == undefined ||
								        this.form.channelId == null
								      ) {
								        this.$message({
								          type: "error",
								          message: "请上传文件或者将结算渠道内容填写完整",
								        });
								        return;
								      }
								      //开始formData
								      let formData = new window.FormData();
								      formData.append("file", this.inputfile);
								      //将后端需要得参数塞进去
								      formData.append("channelId", this.form.channelId);
								      let params = {
								        url: "/api/maintenance/v1/channel/settlement/apply",
								        method: "post",
								        body: formData,
								      };
								      this.fullscreenLoading = true;//开始加载中
								      this.http(params).then(
								        (res) => {
								          this.dialogVisible = false;//弹窗关闭
								          if (
								            res.data.filePath != "" &&
								            res.data.filePath != undefined &&
								            res.data.filePath != null
								          ) {
								            window.open(res.data.filePath, "_blank");
								            this.$message({
								              type: "error",
								              message: res.data.message,
								            });
								          } else {
								            this.$message({
								              type: "success",
								              message: res.data.message,
								            });
								          }
								
								          this.getSearch();
								          this.fullscreenLoading = false;//加载中结束
								        },
								        (error) => {
								          this.$message({
								            type: "error",
								            message: error.message,
								          });
								          this.fullscreenLoading = false;
								        }
								      );
								    },
						    
		 }