vue中excel文件上传总结
作者：互联网
1.前台代码：
<!-- 导入功能弹窗 -->
<el-dialog
:title="this.file"
:visible.sync="importTableVisible"
width="40%"
:close-on-click-modal="false"
:show-close="false"
>
<Tabs value="baseInfo">
<TabPane label=" " class="import-label" name="baseInfo">
<div class="rel ifr-show-box">
<el-upload
class="upload-demo"
ref="upload"
multiple="false"
action="/chnview-api/channelApply/import"
name="excelFile"
:headers="headers"
:on-preview="handlePreview"
:on-remove="handleRemove"
:on-error="uploadFalse"
:on-success="uploadSuccess"
:file-list="fileList"
:auto-upload="false"
:before-upload="beforeAvatarUpload"
>
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
<div slot="tip" class="el-upload__tip"></div>
<div>
<div id="app-4">
<ol>
<li v-for="tip in tips">{{ tip.text }}</li>
</ol>
</div>
</div>
<el-button style="margin-left: 10px;" size="small" @click="submitUpload()">保存</el-button>
<el-button
style="margin-left: 10px;"
size="small"
@click="importTableVisible = false"
>关闭</el-button>
</el-upload>
</div>
</TabPane>
</Tabs>
</el-dialog>
<script>
uploadSuccess(response, file, fileList) {
if (response.code=="SUCCESS") {
this.$message.success("导入成功!");
this.$router.push("/main/channelApply");
} else {
this.$message.error("导入失败!");
}
},
uploadFalse(response, file, fileList) {
this.$message.error("文件上传失败！");
},
// 上传前对文件的大小的判断
beforeAvatarUpload(file) {
const extension = file.name.split(".")[1] === "xls";
const extension2 = file.name.split(".")[1] === "xlsx";
const isLt2M = file.size / 1024 / 1024 < 10;
if (!extension && !extension2) {
this.$message.error("上传模板只能是 xls、xlsx格式!");
}
if (!isLt2M) {
this.$message.error("上传模板大小不能超过 10MB!");
}
return extension || extension2;
},
submitUpload() {
//触发组件的action
this.$refs.upload.submit();
this.importTableVisible = false;
},
handleRemove(file, fileList) {
console.log(file, fileList);
},
handlePreview(file) {
if (file.response.status) {
this.$message.success("文件导入成功!");
} else {
this.$message.error("此文件导入失败!");
}
},
importExcel: function() {
this.importTableVisible = true;
}
</script>
2.后台接口
/**
* 信息导入
*
* @param excelFile
* @return RestResponse
*/
@PostMapping("/channelApply/import")
public RestResponse excelImport(@RequestParam("excelFile") MultipartFile excelFile) throws Exception {
//检查文件
checkFile(excelFile);
InputStream in = excelFile.getInputStream();
//多sheet导入时将每个sheet内容存入一个map中，key是sheet name,velue是sheet数据
List<Map<String, List<List<String>>>> list = ExcelUtils.excelSheetsUpload(in, 1, 0);
channelApplyService.importExcel(list);
return RestResponse.success();
}
/**
* 导入校验（excel文件）
*
* @param file
*/
public static void checkFile(MultipartFile file) throws IOException {
//判断文件是否存在
if (null == file) {
// logger.error("文件不存在！");
throw new FileNotFoundException("文件不存在！");
}
//获得文件名
String fileName = file.getOriginalFilename();
//判断文件是否是excel文件
if (!fileName.endsWith("xls") && !fileName.endsWith("xlsx")) {
// logger.error(fileName + "不是excel文件");
throw new IOException(fileName + "不是excel文件");
}
}
3.注意事项：
注意事项1：
multiple="false" 是否支持多文件上传，如果支持多文件上传可以设置为true
注意事项2：
action="/chnview-api/channelApply/import" 这里是相对路径
注意事项3：
name="excelFile" 这里的excelFile 要和后台接口保持一致
注意事项4：
假如报401,查看系统中有没有权限验证。
如果自己的请求里没有token,则要在headers里面加上。
headers: {
Authorization: "Bearer " + window.localStorage.getItem("access_token")
}
注意事项5：
上网查了资料，上传文件遇到401的解决办法中，有的说在headers里加入Content-Type headers: {
"Content-Type": "multipart/form-data"
},
这样不可行，会改变原有的数据格式，不能这样加。
标签：文件,vue,false,excel,excelFile,file,error,message,上传 来源： https://www.cnblogs.com/erma0-007/p/11153384.html