uni-app uni.uploadFile在安卓平台触发success后会再触发一次onProgressUpdate事件

发布于 1周前 作者 itying888 来自 Uni-App

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

Image Image


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事件处理的是当前上传任务的进度更新。当上传成功或失败后,在successfail回调中清理uploadTaskId,避免在上传任务结束后继续处理进度更新事件。此外,cancelUpload方法提供了取消上传的功能,确保在取消上传后也能正确清理状态。

这种方法可以有效避免在success回调后再次触发onProgressUpdate事件的问题,同时提高了代码的健壮性和可维护性。

回到顶部