axios如何实现在浏览器上传图片进度条

axios可以通过监听XMLHttpRequest的upload事件来实现上传进度条的功能。具体实现方式如下：

1. 创建一个FormData对象，将需要上传的文件添加进去。
2. 使用axios的post方法上传文件，同时传递FormData对象。
3. 监听XMLHttpRequest对象的upload事件，获取上传进度，然后根据进度动态更新进度条。

以下是一个示例代码：

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

// 发送POST请求
axios.post('/upload', formData, {
    onUploadProgress: function(progressEvent) {
        // 获取上传进度
        const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
        // 更新进度条
        updateProgressBar(percentCompleted);
    }
}).then(response => {
   // 上传成功，处理响应数据
}).catch(error => {
   // 上传失败，处理错误
});

注意，onUploadProgress选项只在浏览器环境下才能使用。如果使用Node.js等非浏览器环境，则需要使用其他方法获取上传进度。