通過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