axios + vue3 + vite获取文件上传进度

在axios中获取文件上传进度需要使用axios的onUploadProgress方法。在Vue3中，可以使用Composition API来实现。以下是一个使用axios + vue3 + vite获取文件上传进度的示例代码：

引用中的request.ts文件中的代码：

import axios, { AxiosRequestConfig } from 'axios'

const request = axios.create({
  baseURL: 'http://localhost:1101',
  timeout: 5000
})

// 请求拦截器
request.interceptors.request.use(function (config) {
  // 一般在这里设置token
  // console.log('config', config)
  return config
}, function (err) {
  return Promise.reject(err)
})

// 响应拦截器
request.interceptors.response.use(function (config) {
  return config
}, function (err) {
  return Promise.reject(err)
})

// 返回数据data
export default <T = any>(config: AxiosRequestConfig) => {
  return request(config).then(res => {
    return res.data.data as T // 根据你自己的情况
  })
}

在Vue3组件中，可以使用Composition API来实现文件上传进度的获取。以下是一个示例代码：

<template>
  <div>
    <input type="file" @change="uploadFile" />
    <div v-if="progress !== null">
      {{ progress }}%
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'
import uploadFileApi from '@/api/uploadFile'

export default {
  setup() {
    const progress = ref<number | null>(null)

    const uploadFile = async (event: Event) => {
      const file = (event.target as HTMLInputElement).files?.[0]
      if (!file) {
        return
      }

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

      await uploadFileApi({
        url: '/upload',
        method: 'post',
        data: formData,
        onUploadProgress: (progressEvent) => {
          progress.value = Math.round((progressEvent.loaded / progressEvent.total) * 100)
        }
      })

      progress.value = null
    }

    return {
      progress,
      uploadFile
    }
  }
}
</script>

在上面的代码中，我们使用了ref来定义一个响应式的progress变量，用于显示上传进度。在uploadFile方法中，我们使用FormData来创建一个包含文件的表单数据，并将其作为data参数传递给uploadFileApi方法。在uploadFileApi方法中，我们使用onUploadProgress方法来获取上传进度，并将其赋值给progress变量。