uni-app h5 上传 调用 uploadTask.abort(); 之后 onProgressUpdate() 仍然可以监听到并且progress一直在增加

uni-app h5 上传 调用 uploadTask.abort(); 之后 onProgressUpdate() 仍然可以监听到并且progress一直在增加

开发环境 版本号 项目创建方式
HBuilderX 2.9.8 -

示例代码：

methods:{  
upload(){  
       let uploadTask = uni.uploadFile({  
    url: this.config.baseUrl + url,  
    files: files,  
    header: header,  
    formData: formData,  
        success: res => {  
        }  
    })  
    uploadTask.onProgressUpdate(data=>{  
        console.log(data.progress)  
    })  
   this.uploadTask=uploadTask;  
},  
abort(){  
this.uploadTask.abort();  
}  
}

更多关于uni-app h5 上传 调用 uploadTask.abort(); 之后 onProgressUpdate() 仍然可以监听到并且progress一直在增加的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app h5 上传 调用 uploadTask.abort(); 之后 onProgressUpdate() 仍然可以监听到并且progress一直在增加的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 uni-app H5 环境中，调用 uploadTask.abort() 后 onProgressUpdate 仍然触发是已知问题。这是因为 H5 平台的 XMLHttpRequest 在 abort 后可能无法立即停止进度事件，底层实现存在延迟。

建议在 abort 后手动解除进度监听：

abort(){
  if(this.uploadTask){
    this.uploadTask.offProgressUpdate(); // 移除监听
    this.uploadTask.abort();
    this.uploadTask = null;
  }
}

同时可在进度回调中增加状态判断：

let isAborted = false;
uploadTask.onProgressUpdate(data => {
  if(!isAborted) {
    console.log(data.progress)
  }
})

// abort时
isAborted = true;
回到顶部