mirror of
https://github.com/tenrok/axios.git
synced 2026-06-17 19:21:29 +03:00
Added enhanced toFormData implementation with additional options support; (#4704)
Updated default notation for arrays and objects to bracket style; Added `multer/express.js` tests; Updated README.md; Co-authored-by: Jay <jasonsaayman@gmail.com>
This commit is contained in:
@@ -901,7 +901,56 @@ axios.post('https://httpbin.org/post', {x: 1, buf: new Buffer(10)}, {
|
||||
Axios FormData serializer supports some special endings to perform the following operations:
|
||||
|
||||
- `{}` - serialize the value with JSON.stringify
|
||||
- `[]` - unwrap the array like object as separate fields with the same key
|
||||
- `[]` - unwrap the array-like object as separate fields with the same key
|
||||
|
||||
> NOTE:
|
||||
> unwrap/expand operation will be used by default on array-like objects
|
||||
|
||||
FormData serializer supports additional options via `config.formSerializer: object` property to handle rare cases:
|
||||
|
||||
- `visitor: Function` - user-defined visitor function that will be called recursively to serialize the data object
|
||||
to a `FormData` object by following custom rules.
|
||||
|
||||
- `dots: boolean = false` - use dot notation instead of brackets to serialize arrays and objects;
|
||||
|
||||
- `metaTokens: boolean = true` - add the special ending (e.g `user{}: '{"name": "John"}'`) in the FormData key.
|
||||
The back-end body-parser could potentially use this meta-information to automatically parse the value as JSON.
|
||||
|
||||
- `indexes: null|false|true = false` - controls how indexes will be added to unwrapped keys of `flat` array-like objects
|
||||
|
||||
- `null` - don't add brackets (`arr: 1`, `arr: 2`, `arr: 3`)
|
||||
- `false`(default) - add empty brackets (`arr[]: 1`, `arr[]: 2`, `arr[]: 3`)
|
||||
- `true` - add brackets with indexes (`arr[0]: 1`, `arr[1]: 2`, `arr[2]: 3`)
|
||||
|
||||
Let's say we have an object like this one:
|
||||
|
||||
```js
|
||||
const obj = {
|
||||
x: 1,
|
||||
arr: [1, 2, 3],
|
||||
arr2: [1, [2], 3],
|
||||
users: [{name: 'Peter', surname: 'Griffin'}, {name: 'Thomas', surname: 'Anderson'}],
|
||||
'obj2{}': [{x:1}]
|
||||
};
|
||||
```
|
||||
|
||||
The following steps will be executed by the Axios serializer internally:
|
||||
|
||||
```js
|
||||
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}]');
|
||||
```
|
||||
|
||||
```js
|
||||
const axios= require('axios');
|
||||
@@ -917,9 +966,9 @@ axios.post('https://httpbin.org/post', {
|
||||
```
|
||||
|
||||
Axios supports the following shortcut methods: `postForm`, `putForm`, `patchForm`
|
||||
which are just the corresponding http methods with a header preset: `Content-Type`: `multipart/form-data`.
|
||||
which are just the corresponding http methods with the content-type header preset to `multipart/form-data`.
|
||||
|
||||
FileList object can be passed directly:
|
||||
`FileList` object can be passed directly:
|
||||
|
||||
```js
|
||||
await axios.postForm('https://httpbin.org/post', document.querySelector('#fileInput').files)
|
||||
|
||||
Reference in New Issue
Block a user