Axios 是一个流行的 JavaScript 库,用于发送 HTTP 请求。它可以用来发送多部分表单数据,例如上传文件或发送带有附件的 POST 请求。
以下是使用 Axios 发送多部分表单数据的示例代码:
// 引入 Axios 库
import axios from 'axios';
// 创建 FormData 对象
const formData = new FormData();
// 添加表单字段
formData.append('name', 'John Doe');
formData.append('email', 'johndoe@example.com');
// 添加文件
const file = document.getElementById('fileInput').files[0];
formData.append('file', file);
// 发送 POST 请求
axios.post('/api/endpoint', formData, {
headers: {
'Content-Type': 'multipart/form-data'
}
})
.then(response => {
// 请求成功处理
console.log(response.data);
})
.catch(error => {
// 请求失败处理
console.error(error);
});
在上面的示例中,我们首先创建了一个 FormData 对象,并使用 append 方法添加了表单字段和文件。然后,我们使用 Axios 的 post 方法发送了一个 POST 请求,将 FormData 对象作为请求体,并设置了 Content-Type 头信息为 'multipart/form-data'。
请注意,在实际应用中,你需要将 '/api/endpoint' 替换为你的实际 API 端点,并根据需要添加其他的请求配置,例如身份验证信息或其他自定义头信息。
此外,我们还可以使用 Axios 的拦截器来处理上传进度,以便在上传文件时显示进度条。以下是一个示例:
// 添加请求拦截器
axios.interceptors.request.use(config => {
// 在请求发送之前做一些处理
if (config.method === 'post' && config.headers['Content-Type'] === 'multipart/form-data') {
config.onUploadProgress = progressEvent => {
const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
// 更新进度条
console.log(percentCompleted);
};
}
return config;
});
在上面的代码中,我们通过请求拦截器检查请求是否为上传文件的多部分表单数据,并在请求配置中添加了一个 onUploadProgress 回调函数。在回调函数中,我们可以获取上传进度并更新进度条。请注意,这只是一个简单的示例,你可以根据需要进行更复杂的处理。
希望以上代码示例可以帮助到你!