SpringBoot+Ajax文件上传+FormData表单提交

需求

前端： 
html定义好form表单的输入信息（text+file）标签 
js通过Ajax异步提交表单中的内容。 
后端： 
通过接口接收表单中的数据（String+MultipartFile）

实现

HTML部分 ：html定义好form表单的输入信息（text+file）标签

1. //定义好id，ajax会用到

2. <form id="form-add">

3. //单选项 （解释：name要与接口的参数名对应起来，value是对应值）

4. <input type="radio" name="imageNameIndex" value="1"> 一号位

5. <input type="radio" name="imageNameIndex" value="2"> 二号位

6. <input type="radio" name="imageNameIndex" value="3"> 二号位

7.  

8. //文字 （解释：name要与接口的参数名对应起来）

9. <input type="text" name="url">

10.  

11. //文件 （解释：name要与接口的参数名对应起来）

12. <input type="file" name="file">

13.  

14. //提交 （解释：这个按钮的唯一作用就是触发提交的js方法）

15. <button type="button" οnclick="submitFunction()">提交</button>

16. </form>

JS部分：首先你得先引入JQuery。

1. function submitFunction() {

2. //这里唯一需要注意的就是这个form-add的id

3. var formData = new FormData($("#form-add")[0]);

4. $.ajax({

5. //接口地址

6. url: '/submit' ,

7. type: 'POST',

8. data: formData,

9. async: false,

10. cache: false,

11. contentType: false,

12. processData: false,

13. success: function (data) {

14. //成功的回调

15. if(data.code == 300){

16.  

17. }

18.  

19. },

20. error: function (returndata) {

21. //请求异常的回调

22. // modals.warn("网络访问失败，请稍后重试!");

23. }

24. });

25. }

后端Controller部分

1. @RequestMapping(value = "/submit", method = RequestMethod.POST)

2. public BaseBody submit(String imageNameIndex, String url, MultipartFile file)

3. throws Exception {

4.  

5. //这里就可以获取里面的上传过来的数据了

6.  

7. //做一些存库操作，以及返回的数据

8.  

9. }