FormData异步发送文件，后端SpringBoot接收-Toy模板网

这篇具有很好参考价值的文章主要介绍了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 "上传成功";
    }
}