📅  最后修改于: 2023-12-03 15:23:06.774000             🧑  作者: Mango
Axios 是一个基于 Promise 的 HTTP 库,可用于浏览器和 Node.js 环境中的 AJAX 请求和 RESTful API。在一些场景中,需要向服务器上传文件。以下是如何在 Axios 中发送带有文件的 API 请求的说明。
首先,您需要在html文件中添加一个表单,其中包含input
标签来让用户选择文件。
<form>
<input type="file" name="myFile">
</form>
捕捉并准备要发送给服务器的文件。可以使用FormData
API来构建一个包含文件的表单数据,如下所示:
const formData = new FormData();
const file = document.querySelector('input[type="file"]').files[0];
formData.append('myFile', file);
此时,formData
已经包含了要上传的文件。
现在使用 Axios 发送请求。可以使用 Axios 的post
方法将请求发送到服务器。在配置对象中,您可以指定要将可变数据和文件作为FormData
或者JSON
格式的数据传递。对于文件上传来说,我们选择FormData
格式。
axios.post('/api/upload', formData, {
headers: {
'Content-Type': 'multipart/form-data'
}
}).then(response => {
console.log(response);
}, error => {
console.log(error);
});
在这个示例中,我们将文件上传到/api/upload
中,并为请求设置了请求头。
以上是如何在 Axios 中发送带有文件的 API 请求的步骤。通过使用FormData
API,可以将文件与其他表单数据一起发送。整个过程非常简单,只需要几个简单的步骤即可上传文件。