使用文件上传
平台要用到一个数据库对比功能,需要上传个模板excel,就开始使用element-ui的el-upload组件。
前端实现
照着https://element.eleme.cn/#/zh-CN/component/upload
的文档一顿复制修改,因为要传文件和参数,使用formdata形式上传,Content-Type设置为multipart/form-data,实现如下:
<el-upload
action="/tank/compare/upload"
:on-preview="handlePreview"
:auto-upload="false"
:multiple="false"
accept=".xlsx,.xls"
:on-change="changeFile"
>
<el-button size="small" type="primary">上传对比表</el-button>
<div slot="tip">按模板上传对比表</div>
</el-upload>
<script>
changeFile (file) {
let fd = new FormData()
fd.append('file', file)
fd.append('aid', this.selecta)
fd.append('bid', this.selectb)
fd.append('fileName', file.name)
let config = {
headers: {
'Content-Type': 'multipart/form-data'
}
}
axios.post('/compare/upload2', fd, config).then(data => {
if (data.code === 200) {
this.$message.info('成功上传')
}
})
}
后端实现
后端直接在controller使用MultipartHttpServletRequest获取文件,转换成File保存和读取,实现如下:
//上传文件
@RequestMapping(value="upload2",method