使用axios上传文件

JRTU • 2024-11-02 13:15 • 编程

一、安装axios

要使用axios，首先需要在你的项目中安装axios。你可以使用npm或者yarn进行安装。使用命令如下：

  npm install axios

  # 或者

  yarn add axios

安装完成后，在需要使用axios的页面或组件中引入axios库文件

  import axios from 'axios'

二、上传单个文件

上传单个文件需要使用FormData数据类型,代码示例如下:

  const formData = new FormData();
  formData.append('file', file);
  axios.post('/api/upload', formData)

  #或者把请求头的Content-Type设置为multipart/form-data
  const config = {
    headers: {
      "Content-Type": "multipart/form-data"
    }
  }
  axios.post('/api/upload', formData, config)

上传单个文件需要创建一个FormData实例，然后使用append方法添加要上传的文件。将FormData实例传递给axios.post函数即可上传文件。您可以根据需要添加请求头

三、上传多个文件

要上传多个文件，我们需要做的就是在FormData实例中添加多个文件。代码示例如下：

  const formData = new FormData();
  files.forEach(file => {
    formData.append('files[]', file);
  });
  axios.post('/api/upload', formData);

遍历要上传的文件列表，然后将每个文件添加到FormData实例中。在append方法中，使用‘files[]’将所有文件分组传递到服务器，而不是单个文件

四、进度条

上传文件可能需要一些时间，如果想在上传过程中显示进度条，可以使用axios提供的progress事件。progress事件包含上传的进度信息，例如已经上传的字节数、总字节数和百分比等。代码示例如下：

  const config = {
    onUploadProgress: function(progressEvent) {
      const progress = Math.round((progressEvent.loaded * 100) / progressEvent.total);
      console.log('上传进度：', progress);
    }
  };
  axios.post('/api/upload', formData, config);

在config对象中添加onUploadProgress回调函数即可在上传过程中实时获取进度信息，您可以根据需要将信息显示在进度条上

五、错误处理

在上传文件过程中，可能会遇到一些错误。为了在出现错误时向用户提供有用的信息，我们需要在catch块中处理错误。axios可以通过捕获其抛出的异常来处理错误。代码示例如下：

  axios.post('/api/upload', formData).catch(error => console.log(error));

如果上传文件出错，axios会在catch块中抛出一个异常，您可以根据需要将异常信息显示在页面上或将其记录到日志中

原创文章，作者：JRTU，如若转载，请注明出处：https://www.506064.com/n/148209.html