Spring中formdata方式提交json对象和file之一

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

问题

想使用vue-resource表单提交方式到spring，这个表单中包含json对象和file对象。

思路

将json对象和file对象都放到表单提交方式里面的Request Payload中，并在Request Payload中指定内容格式。

步骤

• Spring实现和配置
• vue-resource表单提交

Spring实现和配置

Java实现

@RequestMapping(value = "/submit",
                method = RequestMethod.POST,
                consumes = {"multipart/form-data"})
@ResponseBody
public ResponseEntity submit(@RequestPart("file") MultipartFile file,@RequestPart("form") Form form) {
  ...
}

Spring启用multipart： Spring的配置文件中，启用如下配置： 主要是添加，这一行：

<!--让Servlet支持文件上传-->
<multipart-config/>

<!--配置文件上传-->
<bean id="multipartResolver"
      class="org.springframework.web.multipart.support.StandardServletMultipartResolver">
</bean>

web.xml中，对spring的DispatcherServlet进行配置：

<web-app
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xmlns="http://xmlns.jcp.org/xml/ns/javaee"
  xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee
                      http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
  version="3.1"
  metadata-complete="true">

  <!--配置DispatcherServlet-->
  <servlet>
    <servlet-name>my-dispatcher</servlet-name>
    <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>

    <!--让Servlet支持文件上传-->
    <multipart-config/>

    <!--springMVC需要加载的文件-->
    <init-param>
      <param-name>contextConfigLocation</param-name>
      <param-value>classpath:spring/spring-*.xml</param-value>
    </init-param>
  </servlet>

  <servlet-mapping>
    <servlet-name>my-dispatcher</servlet-name>
    <url-pattern>/</url-pattern>
  </servlet-mapping>

</web-app>

vue-resource表单提交

Javascript实现

var formData = new FormData();
formData.append("file", document.forms[formName].file.files[0]);
formData.append("form", new Blob([JSON.stringify(this.form)], {
  type: "application/json"
}));
this.$http.post("../formdata/submit", formData, {
  headers: {
    'Content-Type': 'multipart/form-data'
  }
}).then(function(response) {
  

}, function(response) {
  // error callback
  
});

这样就可以使用原始的form表单提交了。

感受

vue和spring很配。

参考： Spring MVC Multipart Request with JSON How can i send vue resource POST with multipart/form-data SpringMVC文件上传模块失败

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