el-upload实现导入数据

1、引入el-upload组件，配置相关属性，由于action必须配置，并会自动访问localhost，当前要访问远程服务器的接口，就可以通过自定义http-request属性完成接口调试，否则会出404的错误

<el-upload
      ref="uploadref"
      action="none"       //这里是必配属性，会默认访问localhost
      :auto-upload="true"
      accept=".xlsx, .xls"
      :http-request="httpRequest"  //关键，自定义访问方式
    >
      <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
    </el-upload>

2、注意引入接口

import { import } from "@/services/import";

3、定义FormData,按照接口的参数需求进行定义。

methods: {

 httpRequest(val) {
      let formData = new FormData();
      formData.append("import", 1);
      formData.append("file", val.file);
      this.submitUpload(formData);
    },

    async submitUpload(val) {
      const data = await import(val);
      if (data != undefined && data.msg == "导入成功!") {
        this.$message({
          showClose: true,
          type: "success",
          message: "导入成功！"
        });
      } else {
        this.$message({
          showClose: true,
          type: "error",
          message: "导入失败！"
        });
      }
      this.$refs.uploadref.clearFiles();
      this.$emit("dialogClose", "import");
    }
   
  }