uni-app html5 + 多选图片 api 对 oppo 手机无效

uni-app html5 + 多选图片 api 对 oppo 手机无效

开发环境 版本号 项目创建方式
HBuilderX 3.2.10 云端

示例代码:

getFileList() {  
  if (!window.plus) return  
  return new Promise((resolve, reject) => {  
    window.plus.gallery.pick(function (p) {  
      const res = p.files.map(i => new Promise(resolve => {  
        window.plus.io.resolveLocalFileSystemURL(i, function (entry) {  
          entry.file(function (file) {  
            const fileReader = new window.plus.io.FileReader();  
            fileReader.readAsDataURL(file);                                     
            fileReader.onloadend = function (evt) {  
              const aa = evt.target.result;  
              const arr = aa.split(','),  
                mime = arr[0].match(/:(.*?);/)[1],  
                bstr = atob(arr[1])  
              let n = bstr.length  
              const u8arr = new Uint8Array(n);  
              while (n--) {  
                u8arr[n] = bstr.charCodeAt(n);  
              }  
              const fileResult = new File([u8arr], entry.name, { type: mime });  
              console.log(fileResult);  
              resolve({  
                file: fileResult,  
                image: evt.target.result  
              });  
            }  
          });  
        }, function (e) {  
          window.plus.nativeUI.toast("读取拍照文件错误:" + e.message);  
        });  
      }))  
      Promise.all(res).then(fileList => {  
        console.log(fileList)  
        resolve(fileList)  
      })  
    }, function (e) {  
      reject(e)  
    }, {  
      filter: "image",  
      multiple: true  
    });  
  })  
}

操作步骤:

  • 使用html + 图片多选 api,选择图片。小米手机,一加,三星正常,oppo手机不可多选。

预期结果:

  • oppo手机可多选图片。

实际结果:

  • oppo手机不可多选图片。

bug描述:

  • oppo手机使用图片多选api,相册不能多选。

更多关于uni-app html5 + 多选图片 api 对 oppo 手机无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app html5 + 多选图片 api 对 oppo 手机无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


问题出在使用了 window.plus.gallery.pick 这个5+ API。这个API在部分OPPO手机(特别是ColorOS系统)的Webview环境中存在兼容性问题,可能导致多选功能失效。

解决方案:

  1. 改用uni-app官方API:强烈建议使用uni-app的 uni.chooseImage 替换 plus.gallery.pick。这是跨平台的标准API,兼容性更好。

    getFileList() {
        return new Promise((resolve, reject) => {
            uni.chooseImage({
                count: 9, // 最多可选数量
                sizeType: ['original', 'compressed'],
                sourceType: ['album'],
                success: (res) => {
                    const tempFilePaths = res.tempFilePaths;
                    // 处理文件,转换为File对象(如果需要)
                    const filePromises = tempFilePaths.map((tempFilePath, index) => {
                        return new Promise((resolve) => {
                            // 这里可以根据需要将临时路径转换为File对象
                            // 例如使用plus.io转换或直接上传临时路径
                            resolve({
                                file: tempFilePath, // 或转换后的File对象
                                image: tempFilePath
                            });
                        });
                    });
                    Promise.all(filePromises).then(fileList => {
                        resolve(fileList);
                    });
                },
                fail: (err) => {
                    reject(err);
                }
            });
        });
    }
回到顶部