axios 封装 上传进度

axios的封装可以实现上传进度的监听。你可以使用axios提供的`onUploadProgress`方法来监听上传进度。以下是一个示例：

import axios from 'axios';

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

  return axios.post('/upload', formData, {
    onUploadProgress: progressEvent => {
      const progress = Math.round((progressEvent.loaded / progressEvent.total) * 100);
      console.log(`上传进度: ${progress}%`);
    }
  });
};

在这个示例中，我们使用`axios.post`方法来进行文件上传，同时传入一个包含上传进度监听的`config`对象。在`onUploadProgress`方法中，我们可以通过`progressEvent.loaded`和`progressEvent.total`来计算上传进度，并将结果输出到控制台。

相关问题

axios封装request实现大文件切片上传并获取上传进度和网速

好的，我了解了你的要求。对于你的问题，我可以回答。使用axios封装request可以实现大文件切片上传，并且获取上传进度和网速。具体实现方法可以参考以下链接：https://juejin.cn/post/6844903932689276941。希望对你有所帮助。

vue3如何使用axios封装request并创建上传文件获取文件进度和网速

可以使用axios的拦截器来封装request，同时使用axios的onUploadProgress和onDownloadProgress来获取上传文件和下载文件的进度和网速。具体实现可以参考以下代码：

import axios from 'axios'

const request = axios.create({
  baseURL: 'http://xxx.xxx.xxx.xxx', // 接口根路径
  timeout: 10000, // 请求超时时间
  headers: {
    // 统一设置header信息
  }
})

// 请求拦截器
request.interceptors.request.use(config => {
  // 处理请求前的逻辑，例如添加token
  return config
}, error => {
  return Promise.reject(error)
})

// 响应拦截器
request.interceptors.response.use(response => {
  // 处理响应数据，例如过滤无用数据等
  return response.data
}, error => {
  return Promise.reject(error)
})

// 上传文件进度和网速
request.onUploadProgress = progressEvent => {
  // 处理上传文件进度和网速
}

// 下载文件进度和网速
request.onDownloadProgress = progressEvent => {
  // 处理下载文件进度和网速
}

export default request

在具体使用时，可以像以下代码一样，调用request方法：

import request from './request.js'

request.post('/api/upload', formData, {
  onUploadProgress: progressEvent => {
    // 处理上传文件进度和网速
  },
  onDownloadProgress: progressEvent => {
    // 处理下载文件进度和网速
  }
})