当前位置：首页 > news >正文

spring（@RequestPart）同时上传表单数据和文件

news 来源：原创 2024/4/28 17:11:07

由于文件上传与普通字段上传的请求头设置不一样，之前都是文件和普通数据分开上传进行处理，这样感觉很不优雅。
后来学到spring找到一种方式可以实现文件与JSON数据同时上传的方法，通过注解@RequestPart来实现，接下来分享给大家。

一、环境配置

1、导入依赖jar包

在pom.xml文件中导入依赖

<dependency>
   <groupId>commons-io</groupId>
    <artifactId>commons-io</artifactId>
    <version>2.5</version>
</dependency>
<dependency>
    <groupId>commons-fileupload</groupId>
    <artifactId>commons-fileupload</artifactId>
    <version>1.3.2</version>
</dependency>

2、配置文件上传解析器

在springmvc.xml中配置

<!--处理器映射器，处理器适配器-->
<mvc:annotation-driven/>
<!--文件上传解析器-->
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
    <property name="maxUploadSize" value="10000000"/>
</bean>

二、实现代码

1、前端

var formData = new FormData();
// file 为想要上传的文件
formData.append("file", $("#goods_img_input")[0].files[0]);
//goodInfo 里面即为想要传到后端的json数据
var goodInfo = JSON.stringify({
    "goods_id":parseInt($('#goods_id').text()),
    "name": $('#name').val(),
    "price": $('#price').val(),
    "inventory":$('#inventory').val(),
    "details": $('#details').val()
})
formData.append('goods', new Blob([goodInfo],{type: "application/json"}));

//发送ajax请求
$.ajax({
    url: "/goods/addGoods",
    type: "post",
    //忽略contentType
    contentType: false,
    //取消序列换 formData本来就是序列化好的
    processData: false,
    dataType: "json",
    data: formData,
    success: function (res) {
        if (res>0){
            alert("修改成功！");
            window.location.href = "/goods/findAll/1";
        } else {
            alert("修改失败，请联系系统管理员!");
        }
    }
});

2、后端

@PostMapping("/updateGoods")
@ResponseBody
public void updateGoods(
        @RequestPart("goods")  Goods good,
        @RequestPart("file")  MultipartFile file) {
    System.out.println("good"+good);
    System.out.println("file"+file);
}