form-data詳解

一、formdata傳數組對象

在使用ajax上傳formdata時，需要傳遞一個數組對象，像這樣：

formData.append('names[]', 'Lucy');
formData.append('names[]', 'Lily');

通過這種方式，我們就可以傳遞一個數組了。

二、後端獲取formdata

如何在後端獲取前端傳遞的formData對象？在node.js中，我們可以通過使用multer中間件，來獲取formdata中的文件和其他參數：

const multer = require('multer');
const upload = multer().array(); // 這裡不需要傳遞任何參數

app.post('/upload', upload, (req, res) => {
  const files = req.files;
  const fields = req.body;
  // do something with fields and files
});

三、formdata轉換成json

在前端使用FormData對象來構造表單數據時，我們可以通過調用FormData的entries()方法來獲取表單數據，然後將其轉換成json對象：

const formData = new FormData(document.querySelector('form'));
const object = {};
formData.forEach((value, key) => {
  object[key] = value;
});
const jsonData = JSON.stringify(object);

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

在前端使用formdata上傳文件時，我們可以使用FileReader對象來解析文件：

function readFile(file) {
  const reader = new FileReader();
  reader.readAsDataURL(file);
  reader.onload = function () {
    console.log(reader.result);
  };
}
const formData = new FormData();
const fileInput = document.querySelector('input[type="file"]');
formData.append('file', fileInput.files[0]);
readFile(fileInput.files[0]);

五、formdata.append怎麼用

在前端使用ajax上傳表單時，我們可以使用FormData對象的append()方法來添加表單數據：

const formData = new FormData();
formData.append('username', 'jack');
formData.append('password', '123456');

六、formdata和json區別

FormData是一種表單數據格式，用於在前端向後端提交數據，其中包含了鍵值對，可以包含文件、字元串、二進位數據等，而JSON是一種數據格式，用於在前端各個模塊之間傳遞數據，其中只包含鍵值對，值可以是字元串、數字、對象、數組等。

七、文件流如何放進formdata

在前端使用ajax上傳文件時，我們可以將文件流放進FormData對象中：

const formData = new FormData();
const fileInput = document.querySelector('input[type="file"]');
formData.append('file', fileInput.files[0]);

八、formdata格式

FormData對象的格式如下：

------WebKitFormBoundary3pVjP1K4gE1vjnIO
Content-Disposition: form-data; name="username"

jack
------WebKitFormBoundary3pVjP1K4gE1vjnIO
Content-Disposition: form-data; name="password"

123456
------WebKitFormBoundary3pVjP1K4gE1vjnIO--

九、formdata參數

FormData對象的常用參數：

1. append(name, value)：添加一條表單數據
2. delete(name)：刪除指定名稱的一條表單數據
3. get(name)：獲取指定名稱的表單數據
4. getAll(name)：獲取指定名稱的所有表單數據
5. has(name)：判斷是否存在指定名稱的表單數據
6. set(name, value)：設置指定名稱的表單數據