TypeScript中使用FileReader将Blob转Base64无法返回结果求助

你的代码问题出在FileReader是异步操作：当函数执行到return imageToDisplay时，reader.readAsDataURL(res)还没完成读取，onloadend回调还没触发，所以返回的是初始的空字符串。就算加了回调，如果没处理好异步时机，也会拿不到正确结果。

正确的实现方式：用Promise封装异步操作 #

把转换逻辑包装成Promise，就能等待异步操作完成后拿到Base64结果：

adaptResultToBase64(res: Blob): Promise<string> {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();

    // 读取完成时触发
    reader.onloadend = () => {
      const result = reader.result;
      // 确保结果是字符串类型（readAsDataURL返回的是Base64字符串或ArrayBuffer）
      if (typeof result === 'string') {
        resolve(result);
      } else {
        reject(new Error('Blob转换Base64失败：结果不是字符串类型'));
      }
    };

    // 处理读取错误
    reader.onerror = () => {
      reject(reader.error);
    };

    reader.readAsDataURL(res);
  });
}

如何使用这个函数 #

你可以用async/await（更直观）或者.then()的方式获取结果：

方式1：async/await（推荐）

// 在async函数中调用
async function loadImage(blob: Blob) {
  try {
    const base64Image = await this.adaptResultToBase64(blob);
    // 把base64Image赋值给模板绑定的变量，比如this.imageSrc = base64Image;
  } catch (err) {
    console.error('图片转换失败：', err);
  }
}

方式2：.then()链式调用

this.adaptResultToBase64(blob)
  .then(base64Image => {
    this.imageSrc = base64Image; // 赋值给模板变量
  })
  .catch(err => {
    console.error('图片转换失败：', err);
  });

这样就能确保在FileReader读取完成后，再拿到正确的Base64字符串，用于模板展示。

内容的提问来源于stack exchange，提问作者OHello