FormData詳解

一、formdata傳數組對象

在前端開發過程中，有時我們需要上傳的數據是一個數組對象，這時候我們可以使用FormData將數組對象傳給後台。

舉個例子：

let arr = [{name:'張三', age:20},{name:'李四', age:21},{name:'王五', age:22}];

首先，我們需要將數組對象轉成JSON字符串格式，然後再通過FormData傳給後台：

let formData = new FormData();
formData.append('data', JSON.stringify(arr));

在後台可以通過如下代碼來解析數組對象：

let data = JSON.parse(req.body.data);
console.log(data);
// [{name:'張三', age:20},{name:'李四', age:21},{name:'王五', age:22}]

二、微信小程序使用FormData

在微信小程序中，可以使用wx.uploadFile方法上傳文件，該方法支持FormData對象。

舉個例子：

wx.chooseImage({
  success: function (res) {
    var tempFilePaths = res.tempFilePaths
    wx.uploadFile({
      url: 'https://example.com/upload', //僅為示例，非真實的接口地址
      filePath: tempFilePaths[0],
      name: 'file',
      formData:{
        'user': 'test'
      },
      success: function (res){
        var data = res.data
        //do something
      }
    })
  }
})

我們可以通過wx.uploadFile方法上傳文件，並且發送FormData數據。

三、FormData轉換成JSON

有時候我們需要將FormData對象轉成JSON字符串格式，可以通過以下代碼實現：

let formData = new FormData(document.querySelector('form'));
let jsonObj = {};
for (let [key,value] of formData.entries()) {
  jsonObj[key] = value;
}
let jsonString = JSON.stringify(jsonObj);

這樣就可以將FormData對象轉換成JSON格式。

四、如何把FormData中的文件解析出來

FormData中的文件需要通過後台接口來解析，前端可以通過FormData對象的get方法來獲取文件：

let formData = new FormData(document.forms[0]);
let file = formData.get('file');
console.log(file);

五、FormData.append怎麼用

FormData.append方法可以向FormData對象中添加一個鍵值對，如下所示：

let formData = new FormData();
formData.append('name', '張三');
formData.append('age', '20');

六、FormData和JSON區別

FormData主要用於序列化表單以及創建表單數據，可以通過ajax提交表單數據。而JSON數據格式是一種比較流行的數據交換格式，可以用於前後端數據交換、存儲等。FormData主要用於傳輸表單數據，而JSON可以用於存儲/交換任何類型的數據。

七、文件流如何放進FormData

我們可以通過Blob對象來將文件流放進FormData對象中：

let blob = new Blob(['Hello, world!'], { type: 'text/plain' });
let formData = new FormData();
formData.append('file', blob);

八、FormData格式

FormData的格式類似於鍵值對的格式，如下所示：

let formData = new FormData();
formData.append('name', '張三');
formData.append('age', '20');

九、FormData參數

FormData有以下參數：

• append(name, value, filename): 向FormData對象添加一個鍵值對
• delete(name): 刪除FormData對象中指定鍵名的鍵值對
• get(name): 返回指定鍵名對應的值
• getAll(name): 返回指定鍵名對應的所有值
• set(name, value, filename): 修改FormData對象中指定鍵名對應的值
• has(name): 判斷FormData對象中是否存在指定鍵名的鍵值對
• entries(): 返回FormData對象中所有的鍵值對