Vue中使用Axios配置onUploadProgress监听上传进度报错如何解决

开发者阿泽

2026-9-26

问题排查与解决方案

你遇到的ERR_CONNECTION_RESET报错是现有代码的配置、语法错误共同导致的，删除onUploadProgress后请求正常，是因为新增配置触发了代码的严格校验，暴露了原本被浏览器/框架容错机制掩盖的问题，具体修复方案如下：

核心错误点

请求头配置错误：你手动写的content type键名、multipart/form data值都缺少连字符，是无效配置。且传递FormData对象时，Axios会自动生成带boundary参数的Content-Type请求头，手动设置会丢失boundary，导致服务器无法解析请求体，直接断开连接。
语法错误：异步请求关键字拼写错误，wait应改为await，且需要放在async修饰的函数内；catch回调中错误引用了全局Error构造函数，没有传入实际捕获的error参数。
onUploadProgress写法风险：单行箭头函数随意换行，部分打包工具会自动插入分号导致回调逻辑被截断。

修正后可运行代码

// 注意当前执行上传的函数需要添加async修饰，例如 async handleUpload() {}
this.video = event.target.files[0];
const data = new FormData();
data.append("file", this.video);
data.append("key","1pv6gzpm7mmynwa1l");

const config= {
  // 删除手动设置的Content-Type，交给Axios自动处理即可
  onUploadProgress: (progressEvent) => {
    // 可直接计算百分比用于页面展示
    const uploadPercent = Math.round((progressEvent.loaded * 100) / progressEvent.total);
    console.log('已上传字节数：', progressEvent.loaded, '上传进度：', uploadPercent + '%');
  },
};

await axios.post(this.urlUpload, data, config)
.then((response) => {
  this.showSuccess(response.data.message);
})
.catch((error) => {
  this.showError(error);
});