uni-app 安卓14选择照片唤起照片选择器而非文件选择器 照片结果疑似存在生命周期问题 上传报错

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

uni-app 安卓14选择照片唤起照片选择器而非文件选择器 照片结果疑似存在生命周期问题 上传报错

操作步骤:

/

预期结果:

照片选择器选择照片也能正常上传

实际结果:

照片选择器选择照片上传失败

bug描述:

具体项目情况:使用u-view的u-upload组件 auto-upload=false;项目发布为H5;在第三方app内由H5转化为小程序进行访问
手机环境:Android 14

由于Android 14新特性,选择照片默认唤起的是照片选择器。在此情况下,u-upload组件代码中,selectFile()方法调用uni.chooseImage时,获取到的图片结果的base64可以正常获取;但是uploadFile()方法中无法获取到base64数据,uni.uploadFile也上传失败报错。
如果从照片选择器更换到文件选择器,再从中选择照片,一切正常进行。

p1:照片选择器页面
p2:照片选择器上传失败
p3:照片选择器切换文件选择器
p4:文件选择器页面
p5:文件选择器上传成功

信息类别 信息内容
产品分类 uniapp/H5
PC开发环境 Windows
HBuilderX 正式
HBuilderX版本 4.24
项目创建方式 HBuilderX

照片
照片
照片
照片
照片


4 回复

你好,看你使用的是:使用u-view的u-upload组件 你可以尝试一下在插件市场@作者来询问作者


可是组件内部最终是使用uni.chooseImage来选择图片的

回复 L***@163.com: 我不确定它里面是否对chooseImage有改动,或者你可以通过使用chooseImage的相关逻辑验证一下是否有问题

针对你提到的uni-app在安卓14系统上选择照片时唤起照片选择器而非文件选择器,并且照片结果疑似存在生命周期问题导致上传报错的情况,以下是一个可能的解决方案和代码示例。

解决方案概述

  1. 确保唤起照片选择器:使用uni-app提供的uni.chooseImage API,该API默认会唤起照片选择器。
  2. 处理生命周期问题:确保在正确的生命周期钩子中处理图片选择的结果,并在组件销毁前进行必要的清理工作。
  3. 上传图片:使用uni.uploadFile API进行图片上传,并确保在上传前图片路径有效。

代码示例

1. 唤起照片选择器

export default {
  data() {
    return {
      tempFilePaths: []
    };
  },
  methods: {
    chooseImage() {
      uni.chooseImage({
        count: 1, // 选择图片的数量
        sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机
        success: (res) => {
          this.tempFilePaths = res.tempFilePaths;
          this.uploadImage(this.tempFilePaths[0]);
        },
        fail: (err) => {
          console.error('选择图片失败', err);
        }
      });
    },
    uploadImage(filePath) {
      uni.uploadFile({
        url: 'https://your-server-url/upload', // 上传接口地址
        filePath: filePath,
        name: 'file',
        formData: {
          user: 'test'
        },
        success: (uploadFileRes) => {
          console.log('上传成功', uploadFileRes);
        },
        fail: (err) => {
          console.error('上传失败', err);
        }
      });
    }
  },
  onLoad() {
    // 页面加载时可以进行一些初始化操作
  },
  onUnload() {
    // 页面卸载时进行清理操作,例如取消未完成的上传请求
    // 如果有使用第三方库进行上传管理,可以在这里进行取消操作
  }
};

注意事项

  • 生命周期管理:确保在onUnload钩子中处理页面卸载时的清理工作,以避免因页面销毁导致上传请求中断或内存泄漏。
  • 错误处理:在chooseImageuploadImage方法中添加详细的错误处理逻辑,以便在出现问题时能够定位并解决。
  • 服务器接口:确保服务器接口能够正确处理上传的文件,并返回正确的响应。

通过上述代码示例和注意事项,你应该能够在uni-app中正确处理照片选择并上传,同时避免生命周期问题导致的错误。如果问题依然存在,建议检查uni-app和安卓系统的版本兼容性,以及是否有其他系统或应用层面的限制。

回到顶部