通过Ajax方式上传文件，使用FormData进行Ajax请求

一般文件上传是使用form表单提交，通常我们提交（使用submit button）时，会把form中的所有表格元素的name与value组成一个queryString，提交到后台。这用jQuery的方法来说，就是serialize。

 通过$('#postForm').serialize()可以对form表单进行序列化，从而将form表单中的所有参数传递到服务端。

 

但是上述方式，只能传递一般的参数，上传文件的文件流是无法被序列化并传递的。

不过如今主流浏览器都开始支持一个叫做FormData的对象，有了这个FormData，我们就可以轻松地使用Ajax方式进行文件上传了。

但是提交以后会有刷新。而且文件本身是一个二进制流。这时可以创建一个formData。然后append该文件，然后封装成一个对象，直接进行ajax提交就可以了

具体如下：

var formdata = new FormData();

formData.append('file', $('#file')[0].files[0]);

 $.ajax({

url: '/upload',
type: 'POST',
cache: false,
data: formData,
processData: false,
contentType: false
}).done(function(res) {
}).fail(function(res) {});

也可以参考我自己做过的一个上传文件的代码

//向后台上传附件，传四个参数
            postFile(parentNodeId, nodeId){
                let param=new FormData();//创建 form对象
                param.append('businessNo',projectNo);
                param.append('packageNo', "commonProject");
                param.append("parentNodeId",parentNodeId);
                param.append("nodeId",nodeId);
                var uploadObject=event.target.files;
                console.log(uploadObject);

                var i;
                for( i in uploadObject){
                    param.append("file", uploadObject[i]);
                } //console.log(param.get('file'));//查看file,需要使用get方法,FormData私有类对象,访问不到,可以通过get判断值是否传进去
                let config={
                    headers:{
                        'Content-Type': 'multipart/form-data'
                    } //添加表头，因为模拟form提交时，上传文件，需要

                };
                //this.fileList.push(e.target.files[0]);
                axios.post("/auditMgr/fileUp",param,config
                ).then((res)=>{
                    console.log(res.data);
                    this.getuploadfile();
                })
            },

　当然也可以看一下以下这边文档，写的很详细

参考文档：https://blog.csdn.net/inuyasha1121/article/details/51915742