宝塔服务器面板，一键全能部署及管理，送你10850元礼包，点我领取

一、axios概述

axios是一个基于Promise的HTTP客户端库，可以发送GET、POST、PUT、DELETE等http请求，并支持请求和响应的拦截器、请求取消、全局配置等功能。

在React、Vue等前端框架中，axios已经成为了首选的HTTP请求库。除此之外，axios还支持文件上传和下载。

二、axios上传文件的准备工作

在上传文件之前，我们需要做好以下准备工作：

  1. 安装axios库
    2. npm install axios
  2. 创建一个用于上传文件的表单
    3. <form>
  <input type="file" name="file">
</form>
  3. 创建一个上传文件的接口
    4. // node.js
app.post('/upload', function(req, res) {
  // 处理上传的文件
})

    其中，需要使用multer等Node.js中间件来处理文件上传。关于multer的使用，可以参考其官方文档。

三、使用axios上传文件

1. 上传单个文件

使用axios上传单个文件的方法很简单。首先，需要获取到表单中选中的文件；其次，需要使用FormData将文件和其他数据一起发送给服务器。

// 选中表单中的文件
const file = document.querySelector('input[type=file]').files[0]

// 创建FormData
const formData = new FormData()
formData.append('file', file)

// 发送POST请求
axios.post('/upload', formData).then(res => {
  console.log('上传成功')
})

2. 上传多个文件

同样的，上传多个文件也很简单。只需要在FormData中用append方法添加多个文件即可。

// 选中表单中的多个文件
const files = document.querySelector('input[type=file]').files

// 创建FormData
const formData = new FormData()
for (let i = 0; i < files.length; i++) {
  formData.append('files', files[i])
}

// 发送POST请求
axios.post('/upload', formData).then(res => {
  console.log('上传成功')
})

3. 监听上传进度

使用axios上传文件时，可以通过onUploadProgress方法监听上传进度并实时更新UI。

// 创建FormData
const formData = new FormData()
formData.append('file', file)

// 监听上传进度
axios.post('/upload', formData, {
  onUploadProgress: progressEvent => {
    const progress = Math.round(progressEvent.loaded / progressEvent.total * 100)
    console.log('上传进度：' + progress + '%')
  }
}).then(res => {
  console.log('上传成功')
})

4. 设置请求头信息

如果需要设置上传文件的请求头信息，可以使用自定义header。同时，还需要在node.js端进行相应的处理。

// 创建FormData
const formData = new FormData()
formData.append('file', file)

// 设置请求头信息
const headers = {
  'Content-Type': 'multipart/form-data',
  Authorization: 'Bearer ' + localStorage.getItem('token')
}
axios.post('/upload', formData, {
  headers
}).then(res => {
  console.log('上传成功')
})

5. 取消上传请求

如果上传文件的请求已经发送出去，但是突然间不需要上传了，可以使用axios的cancel方法来取消请求。

// 创建FormData
const formData = new FormData()
formData.append('file', file)

// 发送POST请求
const source = axios.CancelToken.source()
axios.post('/upload', formData, {
  cancelToken: source.token
}).then(res => {
  console.log('上传成功')
}).catch(error => {
  console.log(error)
})

// 取消请求
source.cancel('取消上传')

总结

本文详细介绍了axios上传文件的方法及其使用技巧。通过以上内容的学习，相信大家已经可以轻松上手使用axios进行文件上传了。