elementui
el-upload 多类目上传封装、模板(文件流)下载
<el-form ref="form" :model="form" label-width="100px">
<el-row>
<el-card>
<div
v-for="(item, index) in list"
:key="index"
style="overflow: hidden"
>
<div class="form-title-16">{{ item.title }}</div>
<el-col
v-for="(it, idx) in item.children"
:key="idx"
:span="item.children.length == 1 ? 24 : 12"
>
<el-form-item :label="it.title">
<el-button
size="mini"
type="primary"
@click="handleDowload(it.title, it.code)"
>下载模板</el-button
>
<el-upload
action=""
:http-request="
(file) => handleUpload(file, it.code, index, idx)
"
class="upload-img"
:show-file-list="false"
accept=".docx, .doc, .xlsx, .xls"
:on-remove="
(file, fileList) => handleRemove(file, fileList, it.code)
"
>
<el-button
size="mini"
type="primary"
plain
>点击导入</el-button
>
</el-upload>
</el-form-item>
</el-col>
</div>
</el-card>
</el-row>
</el-form>
list: [
{
title: "类目一",
children: [
{
title: "类目一(1)",
code: "NUM01"
},
],
},
{
title: "类目二",
children: [
{
title: "类目二(1)",
code: "NUM02"
},
{
title: "类目二(2)",
code: "NUM03"
},
{
title: "类目二(3)",
code: "NUM04"
},
{
title: "类目二(4)",
code: "NUM05"
},
],
},
{
title: "类目三",
children: [
{
title: "类目三(1)",
code: "NUM06"
},
{
title: "类目三(2)",
code: "NUM07"
},
{
title: "类目三(3)",
code: "NUM08"
},
{
title: "类目三(4)",
code: "NUM09"
},
{
title: "类目三(5)",
code: "NUM10"
},
{
title: "类目三(6)",
code: "NUM11"
},
],
},
],
// 导入
handleUpload(file, code, index, idx) {
const formData = new FormData();
formData.append("file", file.file);
// 上传loading this.list[index].children[idx][`loading${code}`] = true;
apiXXXX(formData).then((res) => {
if (res.code === 200) {
this.$message.success("导入成功");
}
// 上传loading this.list[index].children[idx][`loading${code}`] = false;
});
}
// 移除
handleRemove(file, fileList, code) {
this.form[`${code}`] = [];
}
// 下载模板
// 自定义文件名
handleDowload(filename, code) {
apiXXXX({ code: code }).then((res) => {
if ("download" in document.createElement("a")) {
let url = window.URL.createObjectURL(res);
let link = document.createElement("a");
link.style.display = "none";
link.href = url;
link.setAttribute("download", filename + ".xls");
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
} else {
navigator.msSaveBlob(res, filename + ".xls");
}
});
},