前端同时提交表单和文件FormData 接口提供了一种表示表单数据的键值对的构造方式，经过它的数据可以使用 XMLHtt

前端上传文件并提交表单

<body>
    <input type="file" id="file" name="file"/>
    <button id="button" name="">上传</button>
</body>

<script
  src="https://code.jquery.com/jquery-3.4.1.js"
  integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
  crossorigin="anonymous"></script>

<script type="text/javascript">
    $(function () {
    $("#button").click(function () {
        //构建formData
        var formData = new FormData();
        //文件部分
        var file = document.getElementById("file").files[0];
        formData.append("fileList", file);
        //json部分
        var imageInfo = JSON.stringify({
          "avgAmount": 0,
          "custId": 0,
          "custCode": "string",
          "displayGroupList": [
            {
              "groupName": "string",
              "groupType": "M",
              "id": 0,
              "itemList": [
                {
                  "categoryCode": "string",
                  "categoryName": "string",
                  "displayCode": "string"
                }
              ],
              "quantityMax": 0,
              "quantityMin": 0
            }
          ],
          "map1": {
            "201907": 100,
            "201908": 100,
            "201909": 100
          },
          "endMonth": "201911"
        });
        //这里包装 可以直接转换成对象
        formData.append('imageInfo', new Blob([imageInfo], {type: "application/json"}), "hello");
// {type: "application/json"}
        $.ajax({
            url: "http://127.0.0.1:9091/display/contract/sign",
            type: "post",
            //忽略contentType
            contentType: false,
            //取消序列换 formData本来就是序列化好的
            processData: false,
            dataType: "json",
            data: formData,
            success: function (response) {
                alert(response);
            },
            error: function (msg) {
                console.log(msg)
                alert(msg)
            }
        });
    });
})
</script>

FormData 接口提供了一种表示表单数据的键值对的构造方式，经过它的数据可以使用 XMLHttpRequest.send() 方法送出，本接口和此方法都相当简单直接。如果送出时的编码类型被设为 "multipart/form-data"，它会使用和表单一样的格式。

主要方法：

FormData.append() 向 FormData 中添加新的属性值，FormData 对应的属性值存在也不会覆盖原值，而是新增一个值，如果属性不存在则新增一项属性值。

formData.append(name, value, filename)

参考：FormData-Web API

BLOB对象

参考：Blob-Web API

springmvc 接收

    @PostMapping(value = "/save")
    public YstResult<Void> sign(@Validated @RequestPart("imageInfo") ImageInfo info,
    @RequestPart("fileList") List<MultipartFile> fileList,
    HttpServletRequest request) {
   
    }

@RequestPart("imageInfo")映射json数据到info对象中

@RequestPart("fileList")映射上传文件到liftList列表中