文件导入功能的前端实现
程序员文章站
2022-07-03 18:46:34
1.HTML部分 accept属性可以设置要上传文件的格式 2.js部分 接口部分 代码部分 ......
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") ); } }