前端
使用element-UI组件库上传组件
//HTML部分 HTML部分
<el-upload
size="small"
class="filter-item"
name="excelFile"
ref="upload"
//可以使用action方式
// :action="uploadUrl"
// 大多配合action使用,如果需要headers绑定获取headers方法
// :headers="headers"
//上传的请求方法绑定 :http-request="uploadUrl"
:http-request="uploadUrl"
//上传前的方法
:before-upload="beforeAvatarUpload"
// 选择文件的类型限制
accept=".xlsm,.xlsx"
//是否显示上传列表
:show-file-list="false"
//上传列表数据
:file-list="fileList"
//发生改变回调
:on-change="handleChange"
>
<el-button
size="small"
type="primary"
>导入</el-button>
</el-upload>
//Js部分 Js部分
uploadUrl: function(param) {
this.isImported=true;
var form = new FormData();
form.append("file", param.file);
//使用post方式调用后台接口
api.importExcel(form).then(res => {
console.log(res);
//如果每次上传一个文件,不清空可能会产生一些错误
// this.fileList = [];
})
.catch(err => {
//如果每次上传一个文件,不清空可能会产生一些错误
// this.fileList = [];
});
}
//上传前对上传文件的校验
beforeAvatarUpload(file) {
const extension = file.name.split(".")[1] === "xls";
const extension2 = file.name.split(".")[1] === "xlsx";
const extension5 = file.name.split(".")[1] === "xlsm";
const isLt2M = file.size / 1024 / 1024 < 10;
if (!extension && !extension2 && !extension5) {
this.$message({
message: "上传模板只能是 xls、xlsx格式!",
type: "error"
});
}
if (!isLt2M) {
this.$message({
message: "上传模板大小不能超过 10MB!",
type: "error"
});
}
return extension || extension2 || extension5 || (extension4 && isLt2M);
},
后台接收
@PostMapping("importExcel")
@ResponseBody
public Result importExcel(HttpServletRequest request, HttpServletResponse response) {
CommonsMultipartResolver multipartResolver = new CommonsMultipartResolver(request.getSession().getServletContext());
MultipartHttpServletRequest multipartHttpServletRequest = (MultipartHttpServletRequest)request;
MultipartFile multipartFile = multipartHttpServletRequest.getFile("file");
if (multipartFile.isEmpty()) {
return Result.badRequest("文件不存在",500);
} else {
// 获得上传文件的文件名
String fileName = multipartFile.getOriginalFilename();
// 获取文件扩展名
String eName = fileName.substring(fileName.lastIndexOf(".")+1);
InputStream inputStream = multipartFile.getInputStream();
//接下来就是对文件内数据进行处理
//。。。
}