axios 实现post请求时把对象obj数据转为formdata

将对象数据转为FormData格式主要是为了方便传递文件或图片等二进制数据，而axios是一个流行的Promise based HTTP库，它可以支持多种请求，如GET、POST等。接下来，我将详细讲解如何在axios实现post请求时将对象数据转为FormData格式，并包含两条示例。

实现步骤

1. 导入axios库

在使用前需要先导入axios库，可以使用以下命令安装

npm install axios

或者直接在html中引入axios库

```

```

1. 创建FormData对象

在发送POST请求时，需要创建FormData对象，通过FormData对象来保存数据。

const formData = new FormData();

1. 将对象数据添加到FormData对象中

使用append方法将对象数据添加到FormData对象中。append方法的第一个参数是键名，第二个参数是值，当值为文件类型时，第三个参数为文件名称。如果属性值是一个对象，则需要使用JSON.stringify方法将对象转为字符串。

formData.append('name', '张三');
formData.append('age', 20);
formData.append('avatar', file, 'avatar.png');

1. 设置请求头

将"Content-Type"设置为"multipart/form-data"，这样才可以正确传递FormData对象。

config = {
headers: { 'Content-Type': 'multipart/form-data' }
};

1. 发送POST请求

使用axios发送POST请求，并将FormData对象作为参数传递。

axios.post(url, formData, config)
.then(response => {
console.log(response);
})
.catch(error => {
console.log(error);
});

示例

示例一：POST请求上传单个文件

<input type="file" id="fileInput" name="avatar">

const fileInput = document.querySelector('#fileInput');
const file = fileInput.files[0];

const formData = new FormData();
formData.append('avatar', file, 'avatar.png');

axios.post('/api/upload', formData, {
    headers: { 'Content-Type': 'multipart/form-data' },
})
.then(response => {
    console.log(response.data);
})
.catch(error => {
    console.log(error);
});

示例二：POST请求上传多个文件和其他参数

<input type="file" id="filesInput" name="files" multiple>
<input type="text" id="nameInput" name="name" value="张三">

const filesInput = document.querySelector('#filesInput');
const nameInput = document.querySelector('#nameInput');

const formData = new FormData();
const files = filesInput.files;
for (let i = 0; i < files.length; i++) {
    formData.append('files', files[i], files[i].name);
}
formData.append('name', nameInput.value);

axios.post('/api/upload', formData, {
    headers: { 'Content-Type': 'multipart/form-data' },
})
.then(response => {
    console.log(response.data);
})
.catch(error => {
    console.log(error);
});

以上就是axios实现post请求时将对象数据转为FormData格式的完整攻略。