How to get onUploadProgress in axios?

在使用axios进行文件上传时，追踪上传进度可以通过配置请求时的onUploadProgress属性来实现。onUploadProgress是一个在上传过程中可以被调用的函数，它可以接收一个ProgressEvent作为参数，从而让我们能够获取相关的进度信息。下面是一个使用axios追踪上传进度的示例：

javascript
const axios = require('axios');

// 你需要上传的文件数据
const file = /* 获取文件数据，例如 document.getElementById('file').files[0] */;

// 创建一个 FormData 对象并添加文件
const formData = new FormData();
formData.append('file', file);

// 发起 POST 请求上传文件
axios({
  method: 'post',
  url: '/upload', // 你的上传 URL
  data: formData,
  headers: {
    'Content-Type': 'multipart/form-data'
  },
  onUploadProgress: function(progressEvent) {
    // 计算上传进度
    const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
    // 打印或处理上传进度
    console.log(`上传进度：${percentCompleted}%`);
    // 例如，你可以在这里更新一个进度条的状态
  }
})
.then(response => {
  // 处理响应数据
  console.log('文件上传成功', response);
})
.catch(error => {
  // 处理错误情况
  console.error('文件上传失败', error);
});

在这个例子中，我首先引入了axios模块，然后准备了要上传的文件数据并将其添加到FormData对象中。在发起axios请求时，我设置了请求的method为post，url为上传接口的地址，同时传入了formData作为请求的data。

在请求的配置对象中，我定义了onUploadProgress函数。这个函数会接收到一个ProgressEvent对象，我们可以通过这个对象的loaded属性和total属性来计算当前的上传进度百分比。这个进度信息可以用来更新UI，例如进度条，或者仅仅在控制台中打印出来。

最后，通过then处理了成功的响应，通过catch捕获并处理了可能发生的错误。这个流程是异步的，所以UI的更新应该在onUploadProgress函数中进行，以保证用户可以实时看到上传进度。