当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 文件导入功能的前端实现

文件导入功能的前端实现

2019年08月02日  | 移动技术网IT编程  | 我要评论

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

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网