formdata传对象参数Springboot spring formdata

Spring中formdata方式提交json对象和file之二(改进版)

Spring中formdata方式提交json对象和file之二(改进版)

为什么80%的码农都做不了架构师？>>>

问题

想使用最最最原生的表单提交上传多个文件，而且，这些上传多个文件的name是个变量。在之前《Spring中formdata方式提交json对象和file之一》的基础上面进行进一步改进。具体如下图：

解决

vue动态添加file

spring获取MultipartFile

vue动态添加file

JavaScript
var app = new Vue({
el: '#app',
data: {
form : form,
files: []
},
// 在 `methods` 对象中定义方法
methods: {
processFile: function(event, index) {
var file = {};
file.index = index;
file.file = event.target.files[0]
Vue.set(this.files, this.files.length, file);
},
submit: function (event) {
// 可以提交
var formData = new FormData();
formData.append("form", new Blob([JSON.stringify(this.form)], {type: "application/json"}))
var length = this.files.length;
for(var i = 0; i < length; i++){
var file = this.files[i];
formData.append(file.index, file.file);
}
this.$http.post("../formdata/submit", formData, {
headers: {
'Content-Type': 'multipart/form-data'
}
}).then(function(response) {
}, function(response) {
// error callback
});
}
}
});
HTML

**Note:**这里把input绑定到了processFile方法，这里的index是Vue中的form对象中items的循环索引。

spring获取MultipartFile

Java
@RequestMapping(value = "/submit",
method = RequestMethod.POST,
consumes = {"multipart/form-data"})
@ResponseBody
public ResponseEntity submit(StandardMultipartHttpServletRequest request,@RequestPart("form") Form form) {
List nowItemsList = form.getItems();
Iterator iterator = nowItemsList.iterator();
int index = 0;
while (iterator.hasNext()) {
LineItems nowLine = iterator.next();
String viewType = nowLine.getViewType();
// 文件上传
MultiValueMap map = request.getMultiFileMap();
if (!map.isEmpty()) {
// 这里的index与前端循环索引是一致的
List multipartFileList = map.get(String.valueOf(index));
if (multipartFileList != null) {
for (MultipartFile multipartFile : multipartFileList) {
// 这里就获取到了前端的文件对象：multipartFile
}
}
}
index = index + 1;
}
}

**Note:**MultipartFile和StandardMultipartHttpServletRequest类都是Spring中类。

感受

这样就通过数组的索引，找到对应提交的文件了，在也不用担心动态多文件提交的问题了。

Vuejs2 file input

多文件上传以及java后台接受

angular, spring MVC and multipart/form-data
StandardMultipartHttpServletRequest
How to get Form data as a Map in Spring MVC controller?