axios post 未发送文件 - Javascript

介绍

在前端开发中，我们经常需要与后端进行数据交互。其中，发送 POST 请求是常见的需求之一。而 axios 是一个流行的基于 Promise 的异步 JavaScript HTTP 客户端库，用于向服务器发送 HTTP 请求。

在某些情况下，我们可能需要向服务器发送带有文件附件的 POST 请求。然而，axios 默认情况下只能发送文本数据，不能直接发送文件。

本文将介绍如何使用 axios 发送 POST 请求，并将文件附件添加到请求中。

使用 FormData 发送文件附件

首先，我们需要将文件添加到 FormData 对象中。然后，将 FormData 对象作为请求的 data 属性，使用 Content-Type 设置为 multipart/form-data，以将文件附件附加到 POST 请求中。axios 提供了 post 方法方便我们发送 POST 请求。

以下是一个示例：

// 引入 axios 库
const axios = require('axios');

// 创建一个 FormData 对象，并添加文件到其中
const formData = new FormData();
formData.append('file', file); // 'file' 是上传文件的字段名，file 是文件对象

// 发送 POST 请求
axios.post('https://api.example.com/upload', formData, {
  headers: {
    'Content-Type': 'multipart/form-data' // 设置请求的 Content-Type
  }
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

在上面的示例中，我们首先引入了 axios 库。然后，创建了一个 FormData 对象，并通过 append 方法将文件对象添加到其中。接下来，我们使用 axios.post 方法发送 POST 请求，使用 headers 来设置请求的 Content-Type 为 multipart/form-data。

请注意，在示例中的 https://api.example.com/upload 地址上，你需要将其替换为你实际的服务器端点地址。

总结

使用 axios 发送 POST 请求并附加文件附件需要使用 FormData 对象，并将其作为请求的 data 属性，同时设置 Content-Type 为 multipart/form-data。这样可以实现向服务器发送包含文件附件的 POST 请求。

希望本文对你理解如何使用 axios 发送 POST 请求并附加文件附件有所帮助！

参考链接：

• axios GitHub 仓库
• FormData MDN 文档