最近做一个项目,遇到了一个问题,就是用Vue 上传文件,其实这个很简单,但在实际操作过程中却遇到了问题,后台Controller接收到的文件参数始终为null。如果直接用 Vue的Form 提交,这个问题是很容易就能解决的。但是我要的效果是异步的提交,因此这就需要从根本上解决它。
从网上各种搜,看了N个帖子,也做了各种尝试,都没有成功。
中间过程就不做过多赘述了,直接参考相关的代码吧。
使用 el-upload 来操作选择文件,关于这个组件的使用请查找相关资源 。
前端代码:
<el-upload
class="upload-demo"
ref="upload"
:action="importAction"
:on-preview="handlePreview"
:on-remove="handleRemove"
:file-list="fileList "
:on-exceed="handleExceed"
:on-change="handleFileChange"
multiple
:limit="1"
:auto-upload="false">
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
<el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">确认导入</el-button>
<div slot="tip" class="el-upload__tip">只能上传excel文件,且不超过20M</div>
</el-upload>
submitUpload() {
console.info("提交Form表单..." + this.fileList )
this.upload.fileList = this.fileList;
// this.$refs.upload.submit();
this.upload.file = this.file;
// let params = Object.assign({}, this.upload)
let params = new FormData();
params.append("file",this.file.raw)
params.append("operation","upload_file")
// params.file = this.file
// let instance = axios.create({
// baseURL:'http://localhost:10000/api',
// headers: {'Content-Type':'multipart/form-data'}
// });
//
// instance.post('/hr/salaryImport/doImport',params).then((res) => {
// console.info("Play it ..." + res)
// })
this.fileList = []
},
划重点:
1.可以直接使用submit提交 直接使用:
this.$refs.upload.submit(); 就可以了。
2. 使用 axios 异步提交
创建一个Form对象,这里要特别注意,添加file 参数时,一定要用 file.raw ,而不是 file ,我就是在这个小细节上浪费了很长的时间。
特别注意,一定要设置 header 的 content-type = 'multipart/form-data
后台代码:
@PostMapping(value="/doImport" , consumes = { "multipart/mixed", "multipart/form-data" } )
public HttpResult doImportSalary( @RequestParam(value = "file", required = false ) MultipartFile ufile , HttpServletRequest request) {
System.out.println("上传的文件是:" + ufile );
}
这样就可以搞定了!
希望对大家有所帮助!