Vue使用Element UI 的upload做Excel文件上传,后端拿到Excel做数据导入
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
首先呢,我的需求是用Excel表做数据导入,前端传入文件,后端拿到文件解析,然后插入数据库,由于对vue不熟悉,踩了很多的坑,最后还是做完了,这里分享一下我踩过的坑。
直接贴代码吧:
<!--文件导入-->
<template>
<div>
<el-upload
class="filter-item"
name="file"
action="string"
:on-error="uploadFalse"
:on-success="uploadSuccess"
:before-upload="beforeAvatarUpload"
:limit="1"
ref="upload"
accept=".xlsx,.xls"
:show-file-list="false"
:file-list="fileList"
:http-request="uploadFile"
>
<el-button style="margin-left: 10px;" icon="el-icon-edit" type="primary" v-has-perm="">商品上架</el-button>
</el-upload>
</div>
</template>
最初,我在action里直接添加了后台的API地址,但是拿不到file文件。
然后去查了很多帖子,把目光转到 :http-request="uploadFile"这个属性上面,
action给了一个string值,http-request属性覆盖默认的上传行为,可以自定义上传的实现,从param.file可以直接拿到上传的file文件,拿到文件才能去传输,upload方法:
async uploadFile(param){
const File = param.file;
let formData1 = new FormData();
formData1.append("file", File);
await obj.ExcelInsertGoodinStore(formData1);
this.findPage();
},
ExcelInsertGoodinStore方法:你可以有自己的写法
ExcelInsertGoodinStore(entity){
return axios.post(`good/ExcelInsertGoodinStore`,entity)
}
其他的钩子函数:
上传成功,上传失败,以及上传校验
async uploadSuccess(response, file, fileList) {
console.log(response)
if (response.status==20000) {
this.$message({
message: response.message,
type: 'success'
});
} else {
this.$message({
message: response.message,
type: 'error'
});
}
},
uploadFalse(response, file, fileList) {
this.$message({
message: '文件上传失败!',
type: '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({
message: '上传模板只能是 xls、xlsx格式!',
type: 'error'
});
}
if (!isLt2M) {
console.log("上传模板大小不能超过 10MB!");
this.$message({
message: '上传模板大小不能超过 10MB!',
type: 'error'
});
}
return extension || extension2 || extension3 || (extension4 && isLt2M);
},
后台代码:
很多帖子里会说name方法要与后台接收的参数一致,我一直都写一致的,所以也没发现报错,name=“file” 和后台接收写一致就好了,接收我是用MultipartFile 直接接收,怎么解析(这里就不写了),解析也有很多帖子
/**
* 商品批量导入功能
*/
@RequestMapping(value = "/ExcelInsertGoodinStore", method = RequestMethod.POST)
@ResponseBody
public AxiosResult importGood(@RequestParam("file") MultipartFile file) {
BaseGoodService.GoodImport(file);
return AxiosResult.success(AxiosStatus.OK);
}
这样基本上就可以了,至于你要保存文件到什么地方,还是做文件解析,根据需求来吧。
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45
7 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 7 个月前
更多推荐
已为社区贡献1条内容
所有评论(0)