在 Axios 中发送带有文件的 API 请求

介绍

Axios 是一个基于 Promise 的 HTTP 库，可用于浏览器和 Node.js 环境中的 AJAX 请求和 RESTful API。在一些场景中，需要向服务器上传文件。以下是如何在 Axios 中发送带有文件的 API 请求的说明。

步骤

1. 首先，您需要在html文件中添加一个表单，其中包含input标签来让用户选择文件。

   <form>
     <input type="file" name="myFile">
   </form>
   

2. 捕捉并准备要发送给服务器的文件。可以使用FormDataAPI来构建一个包含文件的表单数据，如下所示：

   const formData = new FormData();
   const file = document.querySelector('input[type="file"]').files[0];
   formData.append('myFile', file);
   

   此时，formData已经包含了要上传的文件。

3. 现在使用 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 请求的步骤。通过使用FormDataAPI，可以将文件与其他表单数据一起发送。整个过程非常简单，只需要几个简单的步骤即可上传文件。