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

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?

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

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

Spring boot中使用Swagger2

Spring boot中使用Swagger2 为什么80%的码农都做不了架构师？ 问题 最近需要做接口开发，给客户端们调用，但是我又不想写文档，听说REST风格的接口都在用Swagger做IDL(Interface description language)，中文就是接口描述语言，简单的说就是给调用方的开发

Spring 2.0.4中使用OAuth2.0认证

Spring 2.0.4中使用OAuth2.0认证 为什么80%的码农都做不了架构师？ 问题 最近有个需求是要给系统里面的所有REST请求，弄一个token，然后，那着这个访问token，去掉接口。阮一峰写了两遍文章，值得我们一看： RESTful API 设计指南 理解OAuth 2.0 这里假设我们

spring-retry使用以及源码

spring-retry使用以及源码 spring retry是从spring batch独立出来的一个能功能，主要实现了重试和熔断，对于重试是有场景限制的，不是什么场景都适合重试， 比如参数校验不合法、写操作等(要考虑写是否幂等)都不适合重试。 比如外部 RPC 调用，或者数据入库

Spring boot文件上传

Spring boot文件上传 为什么80%的码农都做不了架构师？ Spring boot import org.apache.commons.lang3.RandomStringUtils;@Controllerpublic class FileUploadController {@PostMapping(/updateFile) public ResponseEntity updateFile(HttpServletRequest se

nginx解决vuejs与springboot跨域问题

nginx解决vuejs与springboot跨域问题 为什么80%的码农都做不了架构师？ 问题 在实施前后端分离的时候，vuejs与springboot通常不在同一台服务器，这个时候，vuejs调用springboot的时候通常会出现跨域问题。 解决思路 这里的解决方案，主要是通过nginx搭建一个

JUnit 5 测试 Spring 引擎的时候提示 junit-vintage 错误

JUnit 5 测试 Spring 引擎的时候提示 junit-vintage 错误 在 Spring 项目中运行测试的时候，得到错误： TestEngine with ID 'junit-vintage' failed to discover tests” with Spring 这个错误的原因是 JUnit 的引擎，使用了 junit-vintage 引擎。 junit-vint

Selenium Docker的Grid方式进行自动化测试

Selenium Docker的Grid方式进行自动化测试 为什么80%的码农都做不了架构师？ 问题 最新想通过界面批量输入数据到系统里面。 思路 使用自动化测试工具解决这个批量操作到问题。 Selenium selenium/hub selenium/node-chrome他们两者之间的关系，就是hub是管理

Spring boot中Get请求中Date参数的传递

Spring boot中Get请求中Date参数的传递 为什么80%的码农都做不了架构师？ 问题 想要在Get请求中，传递Date参数，如下： @GetMapping(/findByPeriodOrderByTimeDesc)public ResponseEntityListMessage getMessagesPeriodByTimeDesc(@RequestParam @DateTimeFor