uni-app uni.uploadFile在安卓平台触发success后会再触发一次onProgressUpdate事件
uni-app uni.uploadFile在安卓平台触发success后会再触发一次onProgressUpdate事件
操作步骤:
- 在app端使用uploadFile api
预期结果:
- 触发success后不再触发onProgressUpdate
实际结果:
- 触发success后触发onProgressUpdate一次
bug描述:
- 安卓平台上传成功后会继续触发一次onProgressUpdate
信息类别 | 详细信息 |
---|---|
产品分类 | uniapp/App |
PC开发环境 | Windows |
PC版本号 | win10 |
手机系统 | Android |
手机版本号 | Android 10 |
手机厂商 | 模拟器 |
手机机型 | 安卓 |
页面类型 | vue |
vue版本 | vue3 |
打包方式 | 云端 |
项目创建方式 | CLI |
CLI版本号 | 3.0.0-4020920240930001 |
1 回复
在uni-app中使用uni.uploadFile
上传文件时,如果在安卓平台上遇到触发success
回调后,再次触发onProgressUpdate
事件的问题,这通常是由于事件处理逻辑或状态管理不当导致的。下面提供一个代码案例,展示如何正确使用uni.uploadFile
,并避免在success
后不必要的onProgressUpdate
触发。
export default {
data() {
return {
uploadTaskId: null, // 用于存储上传任务ID,以便取消上传
uploadProgress: 0, // 上传进度
};
},
methods: {
uploadFile() {
const that = this;
const filePath = 'path/to/your/file'; // 替换为你的文件路径
const url = 'https://your-upload-url.com/upload'; // 替换为你的上传接口URL
uni.uploadFile({
url,
filePath,
name: 'file',
formData: {
user: 'test'
},
success: (uploadFileRes) => {
console.log('上传成功:', uploadFileRes);
// 在这里处理上传成功的逻辑
// 清除uploadTaskId,避免内存泄漏
that.uploadTaskId = null;
},
fail: (err) => {
console.error('上传失败:', err);
},
complete: () => {
// 无论成功或失败,都可以在这里做一些清理工作
},
// 监听上传进度变化
onProgressUpdate: (res) => {
if (res.taskId === that.uploadTaskId) { // 确保是当前上传任务的进度更新
that.uploadProgress = Math.round((res.progress / 100) * 100); // 更新上传进度
console.log('上传进度:', that.uploadProgress, '%');
}
}
}).then(uploadTask => {
// 保存上传任务ID
that.uploadTaskId = uploadTask.taskId;
}).catch(err => {
console.error('创建上传任务失败:', err);
});
},
cancelUpload() {
if (this.uploadTaskId) {
uni.cancelUploadFile({
taskId: this.uploadTaskId,
success: () => {
console.log('上传已取消');
// 清理uploadTaskId
this.uploadTaskId = null;
},
fail: (err) => {
console.error('取消上传失败:', err);
}
});
}
}
}
};
在这个例子中,我们通过uploadTaskId
来确保onProgressUpdate
事件处理的是当前上传任务的进度更新。当上传成功或失败后,在success
或fail
回调中清理uploadTaskId
,避免在上传任务结束后继续处理进度更新事件。此外,cancelUpload
方法提供了取消上传的功能,确保在取消上传后也能正确清理状态。
这种方法可以有效避免在success
回调后再次触发onProgressUpdate
事件的问题,同时提高了代码的健壮性和可维护性。