elementUI upload 上传文件 先选择文件 在上传服务器

 

vue data中的数据

data(){
  return {
            //文件数据
            file: "",
            filename: "",
            filelist: [],
            errmesg: [],
            btn: {
              disable: false,
              message: "开始上传",
             },
     }
}

页面代码

<el-upload
              style="min-height: 15vh"
              ref="upload"
              name="file"
              :limit="1"
              :auto-upload="false"
              accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
              action="https://jsonplaceholder.typicode.com/posts/"
              :on-exceed="handleExceed"
              :file-list="filelist"
              :on-change="handleChansge"
            >
              <el-button slot="trigger" size="small" type="primary"
                >选择文件</el-button
              >
              <el-button
                style="margin-left: 10px"
                size="small"
                type="success"
                @click="postfile"
                :disabled="btn.disable"
                >{{ btn.message }}</el-button
              >
              <div
                slot="tip"
                class="el-upload__tip"
                style="margin-top: 20px; font-size: 14px"
              >
                上传文件只能为excel文件，且为xlsx,xls格式
              </div>
            </el-upload>
            <!--此处可以写导入时出现的详细错误信息，包含第几行出现问题显示出来-->
            <div
              v-for="(item,index) in errmesg"
              :key="'err'+index"
              class="text"
            >
              {{ item.message }}
            </div>

 

handleExceed(e) {
            // 判断是否只能上传一个文件，超过提示报错
            console.log(e);
            this.$notify.error({
              title: "错误",
              message: "只能上传一个文件哦",
            });
          },
          //判断上传的文件是否符合格式
          handleChansge(file, fileList) {
            let name = file.name;
            if (!/\.(xlsx|xls|XLSX|XLS)$/.test(file.name)) {
              this.$notify.error({
                title: "错误",
                message: "上传文件只能为excel文件，且为xlsx,xls格式",
              });
              this.filelist = [];
              this.file = "";
              return false;
            }
            this.file = file.raw;
            this.filename = file.name;
          },
          //调用后台接口 导入表格数据
          postfile() {
            let that = this;
            if (this.file == "") {
              that.$notify.error({
                title: "错误",
                message: "上传文件不能为空",
              });
              return false;
            } else {
              // 文件形式的需要用 formData.append() 传递参数
              let formData = new FormData();
              formData.append("file", this.file);
              formData.append("publicTransportationCompanies", this.busCompanyValue);
              formData.append("carFactory",this.carFactoryValue);
              let config = {
                headers: { "Content-Type": "multipart/form-data" },
              };
              this.btn.disable = true;
              this.btn.message = "上传中，请等待";
               //这里是 我的接口 你们可根据自己的接口更换即可 
              api.post("/import/importInfo", formData, config)
                .then(function (response) {
                  console.log(response);
                  if (response.data.code == 200) {
                    that.$notify({
                      title: "上传成功",
                      message: response.msg,
                      type: "success",
                    });
                    that.filelist = [];
                    that.btn.disable = false;
                    that.btn.message = "上传服务器";
                    that.centerDialogVisible = true;
                  } else if (response.data.code == 500) {
                    //这里是我的判断 可以忽略不计 你们根据自己接口返回 做相应操作
                    that.errmesg = response.data.data.map((item) => {
                      let str = item.orderNo
                        ? "订单号: " + item.orderNo
                        : item.companyName
                        ? "所属组织: " + item.companyName
                        : item.plateNo
                        ? "车牌号: " + item.plateNo
                        : item.termNo
                        ? "控住器ID: " + item.termNo
                        : item.carNo
                        ? "车辆自编号：" + item.carNo
                        : item.roulesName
                        ? "所属线路批次：" + item.roulesName
                        : item.busType
                        ? "车辆型号：" + item.busType
                        : item.templateName
                        ? "轮胎模板名称: " + item.templateName
                        : item.carFactory
                        ? "车厂：" + item.carFactory
                        : item.publicTransportationCompanies
                        ? "公交公司：" + item.publicTransportationCompanies
                        : "";
                      return {
                        message:
                          "第" + item.number + "行 --> " + str + " " + item.reason,
                      };
                    });
                  }
                })
                .catch((err) => {
                  that.btn.disable = false;
                  that.btn.message = "上传服务器";
                  that.$notify.error({
                    title: "错误",
                    message: "上传过程出错啦",
                  });
                });
            }
          },