文件导入功能的前端实现

1.HTML部分

<input type="file" accept='.xls,.xlsx' class="file">

accept属性可以设置要上传文件的格式

2.js部分

接口部分

export function postImportRole(params) {
  return axios.post(servers + '/role/import-roles', params, {
    headers: { 'Content-Type': 'multipart/form-data;charset=UTF-8' }
  });
}

代码部分

// 导入文件
importFile() {
const that = this;
const formData = new window.FormData();
const files = document.querySelector("input[type=file]").files;
formData.append("file", files[0]);
if (files.length <= 0) {
this.$openMessage("请选择导入文件", "error");
} else {
if (!/.(xlsx)$/.test(files[0].name)) {
this.$openMessage("导入文件格式不正确", "error");
} else {
postImportRole(formData)
.then(res => {
if (res.data.code === "0") {
that.visibleImportRole = false;
this.$openMessage("导入成功");
this.search();
} else {
this.$openMessage(res.data.msg, "error");
}
})
.catch(() =>
this.$openMessage("导入失败，请核对文档格式是否正确", "error")
);
}
}

版权声明：本文来源博客园，感谢博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://www.cnblogs.com/thinkguo/p/11288334.html
站方申明：本站部分内容来自社区用户分享，若涉及侵权，请联系站方删除。

发表于 2019-11-17 14:33:09
阅读 ( 694 )
分类：前端

文件导入功能的前端实现

你可能感兴趣的文章

精选的优质文章

0 条评论

官方社群

GO教程

推荐文章

猜你喜欢

随便看看