多部分主體

張貼資料為 multipart/form-data

使用 FormData API

瀏覽器

const form = new FormData();
form.append('my_field', 'my value');
form.append('my_buffer', new Blob([1,2,3]));
form.append('my_file', fileInput.files[0]);

axios.post('https://example.com', form)

使用內部 Axios 序列化器和對應的簡寫方法，可達成相同的結果

axios.postForm('https://httpbin.org/post', {
  my_field: 'my value',
  my_buffer: new Blob([1,2,3]),
  my_file:  fileInput.files // FileList will be unwrapped as sepate fields
});

HTML 表單可直接傳遞為要求酬載

Node.js

import axios from 'axios';

const form = new FormData();
form.append('my_field', 'my value');
form.append('my_buffer', new Blob(['some content']));

axios.post('https://example.com', form)

由於 node.js 目前不支援從檔案建立 Blob，因此您可以使用第三方套件來執行此動作。

import {fileFromPath} from 'formdata-node/file-from-path'

form.append('my_field', 'my value');
form.append('my_file', await fileFromPath('/foo/bar.jpg'));

axios.post('https://example.com', form)

對於舊於 v1.3.0 的 Axios，您必須匯入 form-data 套件。

const FormData = require('form-data');

const form = new FormData();
form.append('my_field', 'my value');
form.append('my_buffer', new Buffer(10));
form.append('my_file', fs.createReadStream('/foo/bar.jpg'));

axios.post('https://example.com', form)

🆕 自動序列化

從 v0.27.0 開始，如果要求的 Content-Type 標頭設定為 multipart/form-data，Axios 支援將物件自動序列化為 FormData 物件。

以下要求將以 FormData 格式提交資料（瀏覽器和 Node.js）

import axios from 'axios';

axios.post('https://httpbin.org/post', {
  user: {
    name: 'Dmitriy'
  },
  file: fs.createReadStream('/foo/bar.jpg')
}, {
  headers: {
    'Content-Type': 'multipart/form-data'
  }
}).then(({data})=> console.log(data));

Axios FormData 序列化器支援一些特殊結尾來執行下列操作

• {} - 使用 JSON.stringify 序列化值
• [] - 將類陣列物件解開為具有相同金鑰的個別欄位

注意：預設會對陣列和 FileList 物件使用解開/展開操作

FormData 序列化器支援透過 config.formSerializer: object 屬性提供額外選項，以處理罕見情況

• visitor: Function - 使用者定義的 visitor 函式，將遞迴呼叫以遵循自訂規則，將資料物件序列化為 FormData 物件。

• dots: boolean = false - 使用點狀符號而非方括號來序列化陣列和物件；

• metaTokens: boolean = true - 在 FormData 鍵中加入特殊結尾 (例如 user{}: '{"name": "John"}')。後端的 body-parser 潛在可使用此元資訊，自動將值解析為 JSON。

• indexes: null|false|true = false - 控制如何將索引加入到 flat 類似陣列物件的未包裝鍵中

  • null - 不加入方括號 (arr: 1, arr: 2, arr: 3)
  • false(預設) - 加入空方括號 (arr[]: 1, arr[]: 2, arr[]: 3)
  • true - 加入帶有索引的方括號 (arr[0]: 1, arr[1]: 2, arr[2]: 3)

假設我們有一個像這樣的物件

const obj = {
  x: 1,
  arr: [1, 2, 3],
  arr2: [1, [2], 3],
  users: [{name: 'Peter', surname: 'Griffin'}, {name: 'Thomas', surname: 'Anderson'}],
  'obj2{}': [{x:1}]
};

Axios 序列化器會在內部執行下列步驟

const formData= new FormData();
formData.append('x', '1');
formData.append('arr[]', '1');
formData.append('arr[]', '2');
formData.append('arr[]', '3');
formData.append('arr2[0]', '1');
formData.append('arr2[1][0]', '2');
formData.append('arr2[2]', '3');
formData.append('users[0][name]', 'Peter');
formData.append('users[0][surname]', 'Griffin');
formData.append('users[1][name]', 'Thomas');
formData.append('users[1][surname]', 'Anderson');
formData.append('obj2{}', '[{"x":1}]');

import axios from 'axios';

axios.post('https://httpbin.org/post', {
  'myObj{}': {x: 1, s: "foo"},
  'files[]': document.querySelector('#fileInput').files 
}, {
  headers: {
    'Content-Type': 'multipart/form-data'
  }
}).then(({data})=> console.log(data));

Axios 支援下列捷徑方法：postForm、putForm、patchForm，它們只是對應的 http 方法，其中內容類型標頭預設為 multipart/form-data。

FileList 物件可以直接傳遞

await axios.postForm('https://httpbin.org/post', document.querySelector('#fileInput').files)

所有檔案都將使用相同的欄位名稱傳送：files[]；