### 如何使用 Axios 配置以发送 formData 格式的数据 为了通过 Axios 发送 `formData` 格式的数据，可以按照以下方式实现。以下是详细的说明： #### 使用 FormData 对象构建表单数据 在 JavaScript 中，可以通过创建一个 `FormData` 实例来封装键值对形式的表单数据[^4]。 ```javascript const formData = new FormData(); formData.append('key1', 'value1'); formData.append('key2', 'value2'); ``` #### 设置 Axios 请求头为 multipart/form-data 当使用 `FormData` 时，Axios 自动设置请求头为 `multipart/form-data`。然而，在某些情况下可能需要手动指定 Content-Type 头部以便兼容特定服务器需求[^5]。 ```javascript axios.post('/api/endpoint', formData, { headers: { 'Content-Type': 'multipart/form-data' } }) .then(response => console.log(response.data)) .catch(error => console.error(error)); ``` 需要注意的是，如果未显式定义 `'Content-Type'`，Axios 将会自动生成适合于所附带数据类型的头部信息[^6]。 #### 示例代码展示完整的 Axios 配置过程 下面提供了一个更全面的例子，演示如何利用 Axios 向后端提交带有文件和其他字段的信息。 ```javascript // 创建一个新的 FormData 实例 let formData = new FormData(); // 添加文本字段至 formdata formData.append("username", "JohnDoe"); // 假设有一个 HTML 文件输入框被选中了某个文件 let fileInput = document.querySelector("#file-input"); if (fileInput.files.length > 0){ let selectedFile = fileInput.files[0]; formData.append("profile_picture", selectedFile); } // 调用 axios 进行上传操作 axios({ method: 'post', url: '/upload_endpoint', data: formData, config: { headers: {'Content-Type': 'multipart/form-data'} } }).then(function (response) { // 成功处理逻辑... }); ``` 以上展示了怎样正确地配置 Axios 来传输基于 `formdata` 的资料给服务端接口[^7]。