Express服务端传base64图片到Flutter出现无效字符报错如何解决

• Appwrite getFilePreview 接口返回的原始数据并非纯二进制Buffer，可能包含响应元信息或已被转为UTF-8字符串，直接调用toString('base64')会生成非法base64编码。
• 生成的base64字符串携带多余换行、空白符，或在JSON传输过程中被新增转义字符（如反斜杠、额外引号），Flutter的base64Decode为严格校验模式，存在非标准base64字符就会抛出无效字符错误。
• 若base64附带了data URI前缀（如data:image/png;base64,），未移除前缀直接解码也会触发报错。

服务端调整 #

首先确认获取到的是纯二进制内容再转码，同时清理转码结果的多余字符：

const getPhoto = async function(req, res){
    // Appwrite SDK的getFilePreview返回的是响应对象，需取data属性获取二进制内容
    const appwriteRes = await api.getStorage().getFilePreview('61579ced0');
    // 统一转为Buffer格式，避免数据类型异常
    const rawData = Buffer.isBuffer(appwriteRes.data) ? appwriteRes.data : Buffer.from(appwriteRes.data);
    // 转base64时移除换行符
    const base64Str = rawData.toString('base64').replace(/[\r\n]/g, '');
    // 用res.json替代res.send，避免自动转义问题
    res.json({ data: base64Str });
};

Flutter端调整 #

解码前先清理base64字符串的非法内容，处理编码填充问题：

Uint8List getImage() {
  // 移除可能存在的data URI前缀
  String processedBase64 = data.replaceFirst(RegExp(r'data:image/[^;]+;base64,'), '');
  // 移除所有空白、换行、转义字符
  processedBase64 = processedBase64.replaceAll(RegExp(r'\s+|\\'), '');
  // 补全base64末尾缺失的填充符=，避免长度不匹配报错
  int paddingCount = (4 - processedBase64.length % 4) % 4;
  processedBase64 += '=' * paddingCount;
  return base64Decode(processedBase64);
}

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