多部分的主体
将数据发送为 multipart/form-data
使用表单数据 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
- 用户定义的访问者函数,将按照自定义规则递归调用以将数据对象序列化为FormData
对象。 -
dots: boolean = false
- 使用点符号而不是括号来序列化数组和对象; -
metaTokens: boolean = true
- 在 FormData 键中添加特殊结尾(例如user{}: '{"name": "John"}'
)。 后端主体解析器可能会使用此元信息自动将值解析为 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 方法,content-type 标头预设为 multipart/form-data
。
FileList
对象可以直接传递:
await axios.postForm('https://httpbin.org/post', document.querySelector('#fileInput').files)
所有文件都将使用相同的字段名称发送: files[]
;