uni-app H5平台uni.chooseImage方法在安卓机上拍照上传图片无法获取图片内容

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

uni-app H5平台uni.chooseImage方法在安卓机上拍照上传图片无法获取图片内容

操作步骤:

  • 项目运行后直接使用手机进入项目拍照

预期结果:

  • iOS手机拍照能正常获取内容,安卓手机无法获取

实际结果:

  • iOS手机拍照能正常获取内容,安卓手机无法获取

bug描述:

  • uni.chooseImage方法在H5上,安卓机使用拍照的形式拍照上传图片无法得到图片内容,iOS上就没有出现这个问题

| 信息类别         | 信息内容               |
|------------------|------------------------|
| 产品分类         | uniapp/App             |
| PC开发环境       | Windows                |
| PC开发环境版本   | win10                  |
| HBuilderX类型    | 正式                   |
| HBuilderX版本    | 3.98                   |
| 手机系统         | Android                |
| 手机系统版本     | Android 13             |
| 手机厂商         | 小米                   |
| 手机机型         | Redmi K40 S            |
| 页面类型         | vue                    |
| vue版本          | vue2                   |
| 打包方式         | 离线                   |
| 项目创建方式     | HBuilderX              |

4 回复

直接试试这个代码,刚测试华为正常拍照可以获得图片内容 <template>
<view class="content">
<button @click=“getPic”>获取图片</button>
<image :src="url" mode="widthFix" class="image"></image>
</view>
</template>

<script> export default { data() { return { url:'' } }, onReady() { }, methods: { getPic() { let _this = this uni.chooseImage({ count: 6, //默认9 sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有 sourceType: ['album'], //从相册选择 success: function(res) { console.log(res.tempFilePaths); _this.url = res.tempFilePaths[0] console.log(_this.url) } }); } } } </script> <style> .image{ margin-top: 30rpx; } </style>

你这个是从相册选择,没有配置拍照吧,看着只有 album

回复 m***@163.com: h5上这个sourceType属性,其实不配置也行,相机拍照是默认就有的

在使用 uni-app 的 uni.chooseImage 方法在 H5 平台上拍照上传图片时,如果遇到无法获取图片内容的问题,尤其是在安卓设备上,可能是由于以下原因导致的。以下是一些排查和解决方案:


1. 检查权限

确保在安卓设备上已经授予了相机和存储权限。如果没有权限,可能会导致无法获取图片。

  • 解决方法:在安卓设备的设置中,手动检查并授予相机和存储权限。

2. 检查 uni.chooseImage 的参数

uni.chooseImage 方法有一些关键参数,确保它们的配置正确:

uni.chooseImage({
  count: 1, // 选择图片的数量
  sourceType: ['camera'], // 指定来源为相机
  success: (res) => {
    console.log(res.tempFilePaths); // 打印临时文件路径
  },
  fail: (err) => {
    console.log('选择图片失败', err);
  }
});
  • 注意:如果 sourceType 设置为 ['album'],则会从相册选择图片;如果设置为 ['camera'],则会从相机拍照。
  • 如果问题仍然存在,可以尝试同时允许从相册和相机选择:sourceType: ['camera', 'album']

3. 检查临时文件路径

success 回调中,res.tempFilePaths 是图片的临时文件路径。确保能够正确获取该路径。

  • 问题排查:如果 res.tempFilePaths 为空或未定义,说明图片未成功保存到临时目录。
  • 解决方法:检查是否使用了正确的 sourceType,并确保设备存储空间充足。

4. 上传图片

如果需要将图片上传到服务器,可以使用 uni.uploadFile 方法:

uni.chooseImage({
  count: 1,
  sourceType: ['camera'],
  success: (res) => {
    const tempFilePath = res.tempFilePaths[0];
    uni.uploadFile({
      url: 'https://example.com/upload', // 上传接口地址
      filePath: tempFilePath,
      name: 'file', // 文件对应的 key
      success: (uploadRes) => {
        console.log('上传成功', uploadRes.data);
      },
      fail: (uploadErr) => {
        console.log('上传失败', uploadErr);
      }
    });
  }
});
  • 注意:确保上传接口地址正确,并且服务器能够处理文件上传。

5. 兼容性问题

某些安卓设备可能存在兼容性问题,导致无法正确获取图片。

  • 解决方法
    1. 更新 uni-app 到最新版本。
    2. 测试不同的安卓设备和浏览器,确认是否为特定设备或浏览器的兼容性问题。
    3. 如果问题仍然存在,可以尝试使用原生开发或插件(如 cordova-plugin-camera)来实现拍照功能。

6. 调试和日志

在开发过程中,使用 console.log 打印关键信息,帮助定位问题:

uni.chooseImage({
  count: 1,
  sourceType: ['camera'],
  success: (res) => {
    console.log('临时文件路径:', res.tempFilePaths);
  },
  fail: (err) => {
    console.log('选择图片失败:', err);
  }
});
回到顶部
AI 助手
你好,我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验!