FormData异步发送文件，后端SpringBoot接收

问题描述：

• 平时我们用表单提交数据时，所有的数据都是以键值对的形式提交给后端的，对于文件二进制流数据也是以键值对提交的，只是说此时值的内容是二进制数据罢了。如果我们想给后端上传文件，一般都是利用表单里的File控件去提交的，但这时候有一个问题，这种上传方式不是异步的，就是说我上传后，后端都会响应一个页面过来。那如果我现在想异步上传文件，该怎么办呢？这时候就要用到js提供的FormData对象了。

---

具体思想：

FormData可以把表单序列化，就是说之前我们是通过表单去形成键值对，而此时我们可以用FormData去创造键值对，然后搭配Ajax，给后端发送数据。直接说是很抽象的，我们直接看代码就很形象了。

---

实现代码：

前端代码

   <p>username:<input type="text" id="d1"></p>
<p>password:<input type="text" id="d2"></p>
<p><input type="file" id="d3" accept="image/*"></p>
<input type="file" id="d4" accept="image/*"><br>
<input type="file" id="d5" accept="image/*"><br>
<button class="btn btn-info" id="d6">点击</button>

<script>
    //点击按钮朝后端发送普通键值对和文件数据
    $('#d6').on('click',function (){
        //1.先创建一个空的FormData，该对象里面是不包含任何键值对的
        let formDateObj = new FormData();
        //2.append方法是为FormData添加键值对的，第一个参数是键名，第二个是键值
        formDateObj.append('username',$('#d1').val());
        formDateObj.append('password',$('#d2').val());
        //3.添加文件二进制数据的键值对，第一个参数是键名，第二个参数是文件对应的二进制流数据
        formDateObj.append('File1',$('#d3')[0].files[0]);
        formDateObj.append('File2',$('#d4')[0].files[0]);
        formDateObj.append('File3',$('#d5')[0].files[0]);
        //4.将对象基于ajax发送给后端，因为能异步请求的途径只有ajax
        $.ajax({
            url:'broadcast',//broadcast为后端接口
            type:'post',
            data:formDateObj,  //直接把FormData对象上传，该对象里包含了前面我们通过append方法添加进来的键值对，这一步就是取代了平时我们通过表单提交键值对的过程

            //ajax发送文件必须要指定两个参数
            contentType:false,  //不要使用任何编码，django后端能够自动识别formdata对象
            processData:false,  //告诉浏览器不要对你的数据进行任何处理

            success:function (args) {
               window.alert(args);//args是后台返回的数据
            }
        })
    })
</script>

因为这里我是利用表单对象FormData来上传数据的，FormData代表的就是表单，所以代码里不需要写表单标签，而是直接写控件标签。 type="file"控件里的accept属性是用来规定上传文件的格式，在这里规定的是只能上传图片形式的文件，image代表图片，后面的*号代表图片里的所有格式都可以上传，包括png，jpg等

后端代码

@RestController
public class serve {

    @PostMapping("/broadcast")
    public String broadcast(String username, String password, MultipartFile File1, MultipartFile File2, MultipartFile File3){
        System.out.println(username);
        System.out.println(password);
        System.out.println(File1.getOriginalFilename());
        System.out.println(File2.getOriginalFilename());
        System.out.println(File3.getOriginalFilename());
       return "上传成功";
    }
}

后端接收接口的方法形参名一定要和前端发送键值对的键名同名且一一对应（包括文件二进制流数据在内），否则上传不成功。这里是打印出文本内容和前端上传文件的文件名

运行结果

---