plus io FileReader的readAsDataURL在uni-app部分机型会偶尔出现空白的base64图片

plus io FileReader的readAsDataURL在uni-app部分机型会偶尔出现空白的base64图片

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

产品分类：HTML5+

手机系统：Android
手机系统版本号：Android 12
手机厂商：华为
手机机型：HUAWEIJAD-AL50

示例代码：

let paths: any = await new Promise((resolve_paths) => {
plus.gallery.pick(
(files) => resolve_paths(files),
() => resolve_paths({
files: []
}),
{ filter: "image", multiple: true, maximum: Infinity, system: false }
);
});
Taro.showLoading();
paths = paths.files;
// 2. 串行处理
const result: Array<any> = [];
for (let i = 0; i < paths.length; i++) {
try {
let localData = await processSingleImageV2(paths[i]);  // 最终loacalData出现白色图片  
}

const processSingleImageV2 = (filePath) => {
return new Promise((resolve) => {
let reader = new plus.io.FileReader();
// 文件读取操作完成时的回调函数
reader.onloadend = async (fileData) => {
let base64 = fileData?.target?.result;
resolve(base64);
};
reader.readAsDataURL(filePath);
});
}


### 操作步骤：


偶现现象，就正常选择相册然后转base64方法

预期结果：

展示正常的相册选择照片


### 实际结果：


会出现空白照片

bug描述：

使用readAsDataURL方法获取出来的照片偶尔会出现空白图片


更多关于plus io FileReader的readAsDataURL在uni-app部分机型会偶尔出现空白的base64图片的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于plus io FileReader的readAsDataURL在uni-app部分机型会偶尔出现空白的base64图片的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个典型的异步处理时序问题。在部分Android机型上，readAsDataURL的onloadend回调可能在实际数据准备好前就触发了，导致获取到空白的base64数据。

建议采用以下解决方案：

  1. 添加数据验证：在onloadend回调中检查base64数据有效性
reader.onloadend = async (fileData) => {
    let base64 = fileData?.target?.result;
    // 验证base64数据是否有效
    if (base64 && base64.length > 100 && !base64.includes('base64,')) {
        resolve(base64);
    } else {
        // 数据无效时重试或报错
        reject(new Error('Invalid base64 data'));
    }
};
  1. 使用setTimeout延迟处理：确保数据完全加载
reader.onloadend = async (fileData) => {
    setTimeout(() => {
        let base64 = fileData?.target?.result;
        resolve(base64);
    }, 100);
};
  1. 改用plus.io.resolveLocalFileSystemURL：更稳定的文件读取方式
plus.io.resolveLocalFileSystemURL(filePath, (entry) => {
    entry.file((file) => {
        let reader = new plus.io.FileReader();
        reader.onloadend = (e) => {
            resolve(e.target.result);
        };
        reader.readAsDataURL(file);
    });
});
  1. 添加错误处理：完善Promise的reject分支
reader.onerror = (e) => {
    reject(new Error('File read error'));
};
回到顶部