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

最新推荐文章于 2024-05-13 03:14:00 发布

weixin_33709364

最新推荐文章于 2024-05-13 03:14:00 发布

阅读量774

点赞数

文章标签： json java 测试

原文链接：https://my.oschina.net/fxtxz2/blog/1828907

版权

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

问题

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

解决

步骤

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

<div v-for="(item, index) in form.items" class="content">
  <input type="file", @change="processFile($event, index)">
</div>

**Note:**这里把input绑定到了processFile方法，这里的index是Vue中的form对象中items的循环索引。前端提交参数位置，这里的就是提交文件的name，也是前端对象循环的索引

spring获取MultipartFile

Java

@RequestMapping(value = "/submit",
                method = RequestMethod.POST,
                consumes = {"multipart/form-data"})
@ResponseBody
public ResponseEntity submit(StandardMultipartHttpServletRequest request,@RequestPart("form") Form form) {
        List<LineItems> nowItemsList = form.getItems();
        Iterator<LineItems> iterator = nowItemsList.iterator();
        int index = 0;
        while (iterator.hasNext()) {
                LineItems nowLine = iterator.next();
                String viewType = nowLine.getViewType();
                // 文件上传
                MultiValueMap<String, MultipartFile> map = request.getMultiFileMap();
                if (!map.isEmpty()) {
                        // 这里的index与前端循环索引是一致的
                        List<MultipartFile> 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?

转载于:https://my.oschina.net/fxtxz2/blog/1828907