springboot通过表单同时提交字段和上传文件

通过form表单同时提交字段和上传文件

单独提交字段或者上传文件都比较简单，这里说一下如何同时提交被后端接收。

前端

1. 字段设置：
   通过input的name属性，和后端的类的field名字对应，使后端拿到该属性。
2. 文件设置：
   通过form表单集成的 for=“file” 或者 for=“files” 属性，上传单个或多个文件，这里同样需要制定name属性，和后端接收的名字一致。
3. 注意的大坑：form表单里button调用的方法名，不能和button的id一致！
4. html代码如下：

<div class="container">
    <form class="form-signin" id="forms" method="post" enctype="multipart/form-data">
        <h2 class="form-signin-heading">表头</h2>
        <div class="input-group">
        <input th:id="field1" name="field1" placeholder="字段1"/>
        <input th:id="field2" name="field2" placeholder="字段2"/>
        </div>
        <div class="form-group">
            <label for="file">上传附件</label>
            <input type="file" id="file" name="file" >
            <p class="help-block">上传zip格式</p>
        </div>
        <div class="form-group">
            <label for="files">上传多附件</label>
            <input type="file" id="files" name="files" multiple>
            <p class="help-block">提示信息</p>
        </div>
        <div class="btn-group" role="group">
            <button type="button" id="upload" th:onclick="uploadFunc()">上传</button>
        </div>
    </form>
</div>

5. js代码如下：

var uploadFunc= function() {
	//获取并打包formdata，准备通过ajax发送
	var formdata = new FormData(document.getElementById("forms"));
	$.ajax({
            type: "post",
            url: "/upload",
            //这里要改成false
            contentType:false,
            processData:false,
            data: formdata,
            success: function (result) {
                console.log(result);
            },
            error: function (e) {
                alert("上传失败！" + e);
            }
        });
}

后端

1. 后端通过DTO接收字段，DTO中的field名字和html中name属性名字一致。
2. 后端通过@RequestParam("for=“file"的lable的name属性”) MultipartFile file来接收单个文件。
3. 后端通过@RequestParam("for=“files"的lable的name属性”) MultipartFile[] files来接收多个文件。
4. 代码如下：

	@RequestMapping(value = "upload")
    @ResponseBody
    public 返回类型 uploadController(FieldsDTO fieldsDTO, @RequestParam("file") MultipartFile multipartfile, @RequestParam("files") MultipartFile multipartfiles) {
      //处理文件代码
      return 返回类型实例;
    }

public class FieldsDTO {
    /**
     * 字段1
     */
    String field1;

    /**
     * 字段2
     */
    String field2;
	//省略get/set
}