问题
想使用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文件上传模块失败