在Next.js TypeScript中如何从FileReader提取Base64字符串？

问题分析 #

你尝试从接口响应对象里提取Base64字符串，用FileReader读取并通过split(',')[1]截取，但结果仍返回对象，未得到预期的纯Base64字符串。

核心排查与解决方向 #

1. 明确响应对象的类型

   • 若响应是File/Blob类型：可以用FileReader处理，但要确保传入转换函数的是File/Blob实例，而非整个响应对象。
   • 若响应是JSON对象：Base64可能直接存放在对象的某个属性中，无需FileReader，直接访问对应属性即可。

2. 修正转换函数的类型安全问题
   原代码直接断言reader.result为字符串可能引发异常，建议先做类型校验：

const convertFileToBase64 = (file: Blob): Promise<string> => {
    return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = () => {
            // 先验证结果类型，避免转换失败
            if (typeof reader.result === 'string') {
                const base64 = reader.result.split(',')[1];
                resolve(base64);
            } else {
                reject(new Error('文件读取结果不是字符串'));
            }
        };
        reader.onerror = error => reject(error);
    });
};

不同场景的处理示例 #

场景1：响应是Fetch返回的二进制数据

如果接口返回二进制文件，需先将响应转为Blob再传入转换函数：

async function fetchAndGetBase64() {
    try {
        const response = await fetch('你的接口地址');
        const blob = await response.blob(); // 将响应转为Blob
        const base64Str = await convertFileToBase64(blob);
        console.log('提取的Base64:', base64Str);
    } catch (error) {
        console.error('处理失败:', error);
    }
}

场景2：响应是包含Base64字段的JSON对象

如果接口返回的JSON里直接有Base64字段，直接提取即可：

// 假设响应对象结构如下
const responseData = {
    code: 200,
    data: {
        base64Content: 'iVBORw0KGgoAAAANSUhEUgAA...'
    }
};

// 直接提取对应属性
const base64Str = responseData.data.base64Content;

内容的提问来源于stack exchange，提问作者B.tebalo