使用 Axios 发送文件

Axios 是一个基于 promise 的 HTTP 库，可以用于发送 HTTP 请求。它支持浏览器和 Node.js 等各种环境，并且具有很简洁的 API。

在这篇文章中，我将介绍如何使用 Axios 发送文件。

安装 Axios

在使用 Axios 之前，需要先安装它。可以使用 npm 来安装：

npm install axios

发送文件

使用 Axios 发送文件需要用到 FormData 对象。FormData 对象可以用于创建表单数据，它可以包含文本数据和二进制数据（文件）。

以下是一个简单的示例，向服务器发送文件：

// 创建一个 formData 对象
const formData = new FormData();

// 将文件添加到 formData 中
formData.append('file', file);

// 发送 HTTP 请求
axios.post('/api/upload', formData)
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.log(error);
  });

注意：在上面的代码示例中，'file' 表示表单数据的 name 值，即服务器接收表单数据时需要根据该值来获取文件对象。

发送进度

使用 Axios 发送文件时，还可以获取上传的进度。可以通过自定义 onUploadProgress 回调函数来实现。

以下是一个示例：

// 创建一个 formData 对象
const formData = new FormData();

// 将文件添加到 formData 中
formData.append('file', file);

// 发送 HTTP 请求，并监听上传进度
axios.post('/api/upload', formData, {
  onUploadProgress: progressEvent => {
    console.log(Math.round((progressEvent.loaded * 100) / progressEvent.total));
  }
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.log(error);
  });

结论

通过本文，我们了解了如何使用 Axios 发送文件，并且可以获取上传进度。Axios 具有很简单的 API，可以用于发送各种 HTTP 请求。