2
0
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:
Dmitriy Mozgovoy
2022-05-11 20:30:08 +03:00
committed by GitHub
parent 495d5fb133
commit 807918bda2
9 changed files with 664 additions and 87 deletions
+52 -3
View File
@@ -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)