uni-app chooseImage上传回显问题

uni-app chooseImage上传回显问题

信息类别 详细信息
产品分类 uniapp/App
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 1.0.2
HBuilderX类型 正式
HBuilderX版本号 3.1.22
手机系统 Android
手机系统版本号 Android 11
手机厂商 华为
手机机型 nova7
页面类型 vue
打包方式 云端
项目创建方式 HBuilderX
App下载地址或H5网址 http://qsmall.net/QSMall_debug.apk

示例代码：

uni.chooseImage({
sourceType: ['album'], //album 从相册选图，camera 使用相机，默认二者都有
sizeType: ['compressed'],//original 原图，compressed 压缩图，默认二者都有
count: that.max_number,
success: (res) => {
uni.previewImage({
urls: res.tempFilePaths,
longPressActions: {
itemList: ['发送给朋友', '保存图片', '收藏'],
success: function(data) {
console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
},
fail: function(err) {
console.log(err.errMsg);
}
}
});
},
})

操作步骤：

  • 上传图片从 图库 选择图片

预期结果：

  • 成功回显

实际结果：

  • 不能回显

bug描述： APP - webview方式加载的页面 使用chooseImage方法选择图片，只有从 ‘文件’ 里面选择的图片能回显成功 从 ’文件管理‘ ’图库‘ 选择的图片都回显失败 尽管图片是同一张图片 浏览器打开上传图片正常 仅安卓端出现问题


更多关于uni-app chooseImage上传回显问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app chooseImage上传回显问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在uni-app中，chooseImage方法返回的tempFilePaths是临时文件路径，这些路径在App端（尤其是Android）可能无法直接用于previewImage预览。这是因为不同来源的图片文件路径处理方式存在差异。从“文件”选择的图片路径通常是可直接访问的，而“图库”或“文件管理”中的路径可能需要转换为可访问的URL。

解决方案是使用uni.getFileSystemManager().readFile将临时文件转换为base64格式或通过uni.uploadFile上传到服务器后使用网络URL。以下是修改后的代码示例：

uni.chooseImage({
  sourceType: ['album'],
  sizeType: ['compressed'],
  count: that.max_number,
  success: (res) => {
    const tempFilePaths = res.tempFilePaths;
    // 转换临时路径为base64用于预览
    const previewUrls = [];
    tempFilePaths.forEach((tempFilePath) => {
      uni.getFileSystemManager().readFile({
        filePath: tempFilePath,
        encoding: 'base64',
        success: (readRes) => {
          const base64Url = `data:image/jpeg;base64,${readRes.data}`;
          previewUrls.push(base64Url);
          // 当所有图片转换完成后预览
          if (previewUrls.length === tempFilePaths.length) {
            uni.previewImage({
              urls: previewUrls,
              longPressActions: {
                itemList: ['发送给朋友', '保存图片', '收藏'],
                success: (data) => {
                  console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
                },
                fail: (err) => {
                  console.log(err.errMsg);
                }
              }
            });
          }
        },
        fail: (err) => {
          console.log('读取文件失败:', err);
        }
      });
    });
  }
});
回到顶部