1.html
<a-row>
<a-col :span="12">
<div style="text-align: center">
<a-button type="primary" @click="ExportUserTemplate()"
>下载模板</a-button
>
</div>
</a-col>
<a-col :span="12">
<div style="text-align: center">
<a-upload
class="avatar-uploader"
:data="{ isup: 1 }"
:before-upload="beforeUpload"
:customRequest="imgBodyupload"
:show-upload-list="false"
>
<div>
<a-button type="primary">导入模板</a-button>
</div>
</a-upload>
</div>
</a-col>
</a-row>
2.下载模板方法:
这里主要是从后端拿到网页链接,打开
// 下载用户导入模板
async ExportUserTemplate() {
const res = await this.$api.ExportUserTemplate();
if (res.success) {
this.$message.success(res.msg);
window.open(res.response)
} else {
this.$message.warning(res.msg);
}
},
3.上传文件:
(1)文件上传前校验
// 文件上传前校验
beforeUpload(file) {
const isxlsx =
file.type ===
"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
if (!isxlsx) {
this.$message.error("文件格式错误,请上传xlsx格式");
}
return isxlsx;
},
(2)自定义上传
// 上传文件
imgBodyupload(file) {
const formData = new FormData();
formData.append("file", file.file);
this.UploadUsers(formData);
},
// 上传文件
async UploadUsers(formData) {
const res = await this.$api.UploadUsers(formData);
if (res.success) {
this.UseVisible = false;
this.$message.success(res.msg);
this.EntGetAllUsers();
} else {
this.$message.warning(res.msg);
}
},