uni-app 调用uni.chooseImage从相册选择图片界面显示黑色

uni-app 调用uni.chooseImage从相册选择图片界面显示黑色

测试过的手机

出问题的手机是华为手机，系统是鸿蒙os2

示例代码

uni.chooseImage({  
    count: 9, //默认9  
    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有  
    sourceType: ['album'], //从相册选择  
    success: (res) => {  
        console.log(res.tempFilePaths[0])  
    }  
});

操作步骤

调用uni.chooseImage后，选择图片界面变成黑色，选择后也不能正确获取文件，
华为mate30会出现这个问题，但是其他手机都正常。

预期结果

选择图片界面正常，选择完图片可以正常获取路径

实际结果

选择图片界面变成黑色，选择后也不能正确获取文件

bug描述

代码如下：

uni.chooseImage({  
    count: 9, //默认9  
    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有  
    sourceType: ['album'], //从相册选择  
    success: (res) => {  
        console.log(res.tempFilePaths[0])  
    }  
});

调用后，选择图片界面变成黑色，选择后也不能正确获取文件，
华为mate30会出现这个问题，但是其他手机都正常。

附件

https://www.itying.com/uniimg.php?url=https://img-cdn-tc.dcloud.net.cn/uploads/questions/20210927/21294ccec842f6245c33a755a3d63928.jpg https://www.itying.com/uniimg.php?url=https://img-cdn-tc.dcloud.net.cn/uploads/questions/20210927/b08a5b2068d109acea9e1e673b688ac8.jpg

表格

信息项 值
产品分类 uniapp/App
PC开发环境 Windows
PC开发环境版本 win10
HBuilderX类型 正式
HBuilderX版本 3.2.8
手机系统 全部
手机系统版本 Android 11
手机厂商 华为
手机机型 mate30
页面类型 vue
打包方式 云端
项目创建方式 HBuilderX

更多关于uni-app 调用uni.chooseImage从相册选择图片界面显示黑色的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

存储权限通过了吗。可以试下HX3.2.9版本

更多关于uni-app 调用uni.chooseImage从相册选择图片界面显示黑色的实战教程也可以访问 https://www.itying.com/category-93-b0.html


我也遇到了这个问题，解决了吗？

我也碰到这个问题。
hbuilder3.6.2
小米K30 android 10

手机重启后，问题没发生

这个问题是华为鸿蒙系统与uni-app图片选择组件兼容性导致的。根据你提供的信息，这是特定机型（华为Mate30）在特定系统（鸿蒙OS2）下的已知问题。

主要原因：

  1. 鸿蒙系统对WebView的权限处理机制与标准Android存在差异
  2. 华为相册应用在鸿蒙系统下的特殊权限限制
  3. uni-app底层调用系统相册时，在鸿蒙系统上的兼容性问题

解决方案：

  1. 检查权限配置 确保在manifest.json中正确配置了相册权限：

    {
  "app-plus": {
    "distribute": {
      "android": {
        "permissions": [
          "<uses-permission android:name=\"android.permission.READ_EXTERNAL_STORAGE\"/>",
          "<uses-permission android:name=\"android.permission.WRITE_EXTERNAL_STORAGE\"/>"
        ]
      }
    }
  }
}

  2. 动态权限申请 在调用chooseImage前，先动态申请存储权限：

    uni.authorize({
  scope: 'scope.writePhotosAlbum',
  success() {
    uni.chooseImage({
      count: 9,
      sourceType: ['album'],
      success: (res) => {
        console.log(res.tempFilePaths[0])
      }
    })
  },
  fail() {
    uni.showModal({
      title: '提示',
      content: '需要相册权限才能选择图片',
      showCancel: false
    })
  }
})

  3. 使用原生插件替代 如果上述方法无效，可以考虑使用原生插件：

    • 使用uni-app的Native.js调用原生相册
    • 使用第三方图片选择插件如uni-file-picker

  4. 临时解决方案 尝试将sourceType改为['camera']或同时包含相机和相册：

    sourceType: ['camera', 'album']
回到顶部