String boot 同时接收File和实体类（注解版）

my陈

已于 2022-08-05 11:22:49 修改

阅读量1.3k

点赞数

分类专栏：前端 SpringBoot 文章标签：前端 java javascript

于 2022-08-05 10:34:37 首次发布

本文链接：https://blog.csdn.net/weixin_44552168/article/details/126172499

版权

前端同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

SpringBoot

6 篇文章 0 订阅

订阅专栏

需求描述：

将下图表单数据保存到数据库

示例代码

后台代码：

import com.alibaba.fastjson.JSON;

@PostMapping("/test")
public ReturnJson test(
        @RequestParam("file") MultipartFile file,
        @RequestParam("equipmentType") String equipmentType) {
    try {
        //控制台打印文件-二进制
        System.out.println(file.getBytes());
        AddEquipmentTypeVo addEquipmentTypeVo = JSON.parseObject(equipmentType, AddEquipmentTypeVo.class);
        //控制台打印实体
        System.out.println(addEquipmentTypeVo);
    } catch (IOException e) {
        e.printStackTrace();
    }
    return ReturnJson.error();
}

遇到的问题

为什么要将实体类变成String类型接收？

应为传递File的时候已经将请求类型改为了“multipart/form-data”所以再使用@RequestBody注解会报错误：

Resolved [org.springframework.web.HttpMediaTypeNotSupportedException: Content type 'multipart/form-data;boundary=----WebKitFormBoundaryD6szBQQDQpeMkdnR;charset=UTF-8' not supported]

如果不加注解传递的实体类参数值为空所以只能这样了，如果有更好的方法请指教

前端代码：

<form id="uploadForm">
    <input id="file" name="file" type="file"/>
    <input id="id" name="equipmentType.equipmentTypeId" type="text"/>
    <input id="name" name="equipmentType.equipmentTypeName" type="text"/>
    <input id="assetPath" name="equipmentType.assetPath" type="text"/>
    <input οnclick="upload();" type="button" value="提交"/>
</form>

请求代码：

function upload() {
    let formData = new FormData();//表单id
    formData.append("file", $("#file")[0].files[0]);
    let equipmentType = {
        equipmentTypeId: $("#id").val(),
        equipmentTypeName: $("#name").val(),
        assetPath: $("#assetPath").val()
    }
    formData.append("equipmentType", JSON.stringify(equipmentType))
    console.log($("#file")[0].files[0])
    console.log(equipmentType)
    $.ajax({
        type: 'post',
        processData: false,//这个必须有，不然会报错
        contentType: false,//这个必须有，不然会报错
        data: formData,
        url: 'http://localhost:8081/equipmentType/test',
        cache: false,
        dataType: 'json',
        success: function (data) {
            console.log(data)
        }
    });
}

如有帮助请点个小心心 ❤