文档章节

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

亚林瓜子
 亚林瓜子
发布于 2018/06/12 15:54
字数 350
阅读 261
收藏 1

问题

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

© 著作权归作者所有

亚林瓜子

亚林瓜子

粉丝 23
博文 254
码字总数 87672
作品 0
长沙
高级程序员
私信 提问
ajax传输formdata的问题

我现在要做一个上传的功能,需要对上传文件的类型进行判断,但是现在前台好像是做不了啦。 使用document.getElementById直接获取input type=file的标签对象,然后使用value属性现在取不到值了...

我就是个菜
2016/01/22
562
0
SpringBoot系列教程web篇之Post请求参数解析姿势汇总

作为一个常年提供各种Http接口的后端而言,如何获取请求参数可以说是一项基本技能了,本篇为《190824-SpringBoot系列教程web篇之Get请求参数解析姿势汇总》之后的第二篇,对于POST请求方式下...

小灰灰Blog
08/28
32
0
IOS网络访问之使用AFNetworking

  AFNetworking是IOS上常用的第三方网络访问库,我们可以在github上下载它,同时github上有它详细的使用说明,最新的AFNetworing2.0与1.0有很大的变化,这里仅对2.0常用的使用方法进行总结...

王斌_Duke
2015/08/10
89
0
IOS网络访问之使用AFNetworking

IOS网络访问之使用AFNetworking   AFNetworking是IOS上常用的第三方网络访问库,我们可以在github上下载它,同时github上有它详细的使用说明,最新的AFNetworing2.0与1.0有很大的变化,这里...

王斌_Duke
2015/08/12
3.8K
0
spring boot 接收 ajax 提交的表单数据

最近在学习 spring boot 在提交数据的时候遇到了一点问题 在使用formData 对表单进行提交的时候出现的 首先设置了让jquery 不出处理表单数据,不然jquery 会报错 这个是没问题的 然后设置让 ...

小鸟00
2018/08/06
3.9K
3

没有更多内容

加载失败,请刷新页面

加载更多

CSS--列表

一、列表标识项 list-style-type none:去掉标识项 disc:默认实心圆 circle:空心圆 squire:矩形 二、列表项图片 list-style-img: 取值:url(路径) 三、列表项位置 list-style-position:...

wytao1995
今天
6
0
linux 命令-文本比较comm、diff、patch

本文原创首发于公众号:编程三分钟 今天学了三个文本比较的命令分享给大家。 comm comm 命令比较相同的文本 $ cat charabc$ cat chardiffadc 比如,我有两个文件char和chardiff如上,...

编程三分钟
今天
7
0
QML教程

https://blog.csdn.net/qq_40194498/article/category/7580030 https://blog.csdn.net/LaineGates/article/details/50887765...

shzwork
今天
5
0
HA Cluster之5

对于使用heartbeat v2版的CRM配置的集群信息都是保存在一个名为cib.xml的配置文件中,存放在/var/lib/heartbeat/crm/下。CIB:Cluster Information Base,由于xml文件配置不是那么方便,所以...

lhdzw
今天
6
0
玩转Redis-Redis基础数据结构及核心命令

  《玩转Redis》系列文章主要讲述Redis的基础及中高级应用,文章基于Redis5.0.4+。本文主要讲述Redis的数据结构String,《玩转Redis-Redis基础数据结构及核心命令》相关操作命令为方便对比...

zxiaofan666
今天
11
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部