axios 上传文件参数设置

原创

mob64ca12e60047 2023-12-25 07:26:51 ©著作权

©著作权归作者所有：来自51CTO博客作者mob64ca12e60047的原创作品，请联系作者获取转载授权，否则将追究法律责任

axios 上传文件参数设置

在前端开发中，有时候我们需要将文件上传到服务器，比如上传图片、上传文档等。而axios是一个常用的HTTP请求库，它提供了一种简单方便的方式来发送HTTP请求。本文将介绍如何使用axios来上传文件，并详细解释上传文件时的参数设置。

1. 安装axios

首先，我们需要安装axios。在命令行中执行以下命令：

npm install axios

或者使用CDN引入axios：

<script src="

2. 文件上传参数设置

使用axios上传文件时，我们需要设置一些特殊的参数，以便服务器正确处理文件上传请求。下面是一些常用的参数设置：

headers：请求头信息，我们需要设置Content-Type为multipart/form-data，表示请求体中包含文件数据。
onUploadProgress：上传进度回调函数，可以用来实时显示上传进度。
data：请求体数据，我们需要将文件作为请求体发送到服务器。

下面是一个完整的文件上传示例代码：

const formData = new FormData();
formData.append('file', file);

axios.post('/upload', formData, {
  headers: {
    'Content-Type': 'multipart/form-data'
  },
  onUploadProgress: progressEvent => {
    const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
    console.log(`上传进度：${percentCompleted}%`);
  }
}).then(response => {
  console.log(response.data);
}).catch(error => {
  console.error(error);
});

在上面的示例代码中，我们首先创建了一个FormData实例，并通过append方法将文件添加到表单数据中。然后使用axios.post方法发送POST请求，将表单数据作为请求体发送到服务器。在请求配置中，我们设置了请求头的Content-Type为multipart/form-data，并通过onUploadProgress方法监听上传进度。

3. 示例解析

让我们来详细解析一下上面的示例代码。

首先，我们创建了一个FormData实例，并利用append方法将文件添加到表单数据中。FormData是一种表示表单数据的对象，可以用于将表单数据序列化成字符串，以便用于AJAX请求。通过append方法，我们将文件添加到表单数据中，其中第一个参数是字段名，第二个参数是文件对象。

然后，我们使用axios.post方法发送POST请求，将表单数据作为请求体发送到服务器。在请求配置中，我们设置了请求头的Content-Type为multipart/form-data，表示请求体中包含文件数据。

接下来，我们通过onUploadProgress方法设置了一个上传进度回调函数，用来实时显示上传进度。onUploadProgress方法接收一个参数progressEvent，其中包含了上传进度相关的信息。通过计算已上传的字节数和文件总字节数的比例，我们可以得到上传进度的百分比。在上面的示例代码中，我们简单地将上传进度打印到控制台，你可以根据实际需求来显示上传进度。

最后，我们使用then方法处理上传成功时的响应，使用catch方法处理上传失败时的错误。