使用js FormData傳文件流，傳json（重點）

先介紹js的FormData，FormData是XMLHttpRequest Level 2新增的一個接口，利用FormData對象,咱們能夠經過JavaScript用一些鍵值對來模擬一系列表單控件,咱們還可使用ajax方法來異步的提交這個"表單".使用FormData的最大優勢就是咱們能夠異步上傳一個二進制文件.
這裏說下FormData的append方法，

給當前FormData對象添加一個鍵/值對(append)

void append(DOMString name, Blob value, optional DOMString filename);
void append(DOMString name, DOMString value);

參數值

name

字段名稱.

value

字段值.能夠是,或者一個字符串,若是全都不是,則該值會被自動轉換成字符串.

filename

(可選) 指定文件的文件名,當value參數被指定爲一個Blob對象或者一個File 接口提供有關文件的信息，並容許網頁中的 JavaScript 訪問其內容。")對象時,該文件名會被髮送到服務器上,對於Blob對象來講,這個值默認爲"blob".

這裏要注意下value字段，若是你要填入的是一個對象，會將它轉換成字符串，也就是最後傳給後臺的都是[object object]，這樣後臺固然是沒法解析的。下邊舉個例子，你們就明白了

好了，請上咱們的兩位同窗，小明和胖虎，大家就不用發言了，我會以json的形式介紹大家的狀況和我的癖好，請坐。

var json=[
         {'name':'小明','age':15,'skills':['抽菸','喝酒','燙頭'],'family':{'father':'大明','mohter':'小紅'}},
         {'name':'胖虎','age':17,'skills':['打架','打架','仍是打架'],'family':{'father':'佐藤','mohter':'愛田'}},
     ]

首先咱們先試一下，把小明的family對象傳給後臺。

var data=new FormData()
     data.append('family',json[0].family)
     $.ajax({
         url:'demo.php',
         type: "Post",
         dataType: "json",
         cache: false,//上傳文件無需緩存
         processData: false,//用於對data參數進行序列化處理 這裏必須false
         contentType: false, //必須
         data:data,
         success:function (res) {
             console.log(res);
         },
         error:function (error) {
             console.log(error);
         }
     })

結果：

被解析成了object object，有人該說了，你把它用JSON.stringify序列化以後不就好了，而後後端配合，再解碼成json，對，這樣確實行，但不要忘了，我們仍是須要傳文件流的，文件流被序列化以後會被轉化成一個空對象，這樣後臺就沒法識別。因爲時間緣由，這裏就不演示反面案例了。
這裏咱們要用兩個語法
1.a['b']等於a.b
2.c[0]取得是c數組的第一項
正確方法：

var data=new FormData()
for(var i=0,len=json.length;i<len;i++){
        data.append('json['+i+'][name]',json[i].name)
        data.append('json['+i+'][age]',json[i].age)
        data.append('json['+i+'][family][father]',json[i].family.father)
        data.append('json['+i+'][family][mother]',json[i].family.mohter)
        for(var j=0,len2=json[i].skills.length;j<len2;j++){
            data.append('skills['+i+']['+j+']',json[i].skills[j])
        }
    }
     $.ajax({
         url:'demo.php',
         type: "Post",
         dataType: "json",
         cache: false,//上傳文件無需緩存
         processData: false,//用於對data參數進行序列化處理 這裏必須false
         contentType: false, //必須
         data:data,
         success:function (res) {
             console.log(res);
         },
         error:function (error) {
             console.log(error);
         }
     })

以後，咱們再給小明和胖虎每人上傳一張我的寫真照（利用input
file，文件流）
這裏咱們利用input上傳時的file對象，
附上代碼：

<input type="file" id="upload">
$('#upload').on('change',function (e) {
         var file = e.target.files[0];
         console.log(file);
         data.append('json[0][image]',file)
     })

這個file對象是一個含有二進制文件，打印爲：

這個對象若是直接序列化，會被轉化爲一個空對象，後臺沒法識別，最後附上vue版代碼：

<input type="file" @click="upload" id="upload">
upload:function (e) {
                var file = e.target.files[0];
                //因爲時間和條件緣由，這裏只給小明上傳一張寫真照
                data.append('json[0][image]',file)
                for(var i=0,len=json.length;i<len;i++){
                    data.append('json['+i+'][name]',json[i].name)
                    data.append('json['+i+'][age]',json[i].age)
                    data.append('json['+i+'][family][father]',json[i].family.father)
                    data.append('json['+i+'][family][mother]',json[i].family.mohter)
                    for(var j=0,len2=json[i].skills.length;j<len2;j++){
                        data.append('skills['+i+']['+j+']',json[i].skills[j])
                    }
                }
                axios.post(api.sendJSON,data,{
                    headers: {
                        "Content-Type": "multipart/form-data"
                    }
                }).then(function (res) {
                    console.log(res);
                }).catch(function (error) {
                    console.log(error);
                })
            },