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");
}
}