如何为FileReader返回结果强制指定类型以解决TypeScript类型不兼容问题

问题原因 #

TypeScript 中 FileReader.result 的默认类型是 string | ArrayBuffer | null，即便你调用的是 readAsDataURL 方法（执行成功后必然返回字符串格式的 DataURL），TS 也不会自动推导类型，因此和你定义的 Promise 返回类型 string 不匹配。

解决方案 #

你只需要在 resolve 时添加类型断言，也可以额外增加边界校验避免异常情况，修改后的代码如下：

// 极简方案：添加类型断言，readAsDataURL 执行成功必然返回字符串，断言安全
getBase64(file: File): Promise<string> {
  return new Promise<string>((resolve, reject) => {
      const reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = ()  => resolve(reader.result as string);
      reader.onerror = error => reject(error);
  });
}

如果需要更严谨的类型校验，可以补充判断逻辑：

// 严谨方案：增加类型判断，极端异常场景直接抛出报错
getBase64(file: File): Promise<string> {
  return new Promise<string>((resolve, reject) => {
      const reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = ()  => {
        if (typeof reader.result === 'string') {
          resolve(reader.result);
          return;
        }
        reject(new Error('文件读取失败，未返回有效的Base64字符串'))
      };
      reader.onerror = error => reject(error);
  });
}

修改后不需要调整你原有 addFile 方法的逻辑，后续的 split 方法可以正常运行。

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