Lambda处理Base64图片转文件上传Supabase后文件损坏问题排查

核心错误点 #

1. Lambda返回的Base64字符串被额外JSON转义 #

你的Lambda函数中，返回的是JSON.stringify(Buffer.from(buffer).toString('base64'))，这会让响应内容变成带双引号的字符串（例如"abc123..."）。客户端拿到这个字符串后，直接使用会包含多余的双引号，导致Base64解码失败，生成损坏的图片文件。

2. 客户端错误使用URL处理函数转换Base64 #

urltoFile函数是用于从URL获取文件内容的，但你传入的是纯Base64字符串，并非合法URL（比如data:image/png;base64,...格式的Data URL）。调用fetch处理纯Base64字符串会导致无法正确获取数据，最终生成无效文件。

修复步骤 #

步骤1：修正Lambda函数的返回格式 #

不要直接对Base64字符串做JSON.stringify，而是返回包含Base64字段的JSON对象，确保客户端能正确解析出纯净的Base64内容：

const Sharp = require("sharp");
const height = 150;
const width = 150;

// 补充sendResponse函数实现（原代码遗漏）
function sendResponse(statusCode, body, callback) {
  const response = {
    statusCode: statusCode,
    headers: {
      "Content-Type": "application/json",
      "Access-Control-Allow-Origin": "*" // 根据实际需求配置跨域
    },
    body: body
  };
  callback(null, response);
}

exports.handler = (event, context, callback) => {
  let request = JSON.parse(event.body);
  let base64String = request.base64String;
  base64String = base64String.split(';base64,').pop();
  let inputBuffer = Buffer.from(base64String, 'base64');
  
  Sharp(inputBuffer)
    .resize(width, height)
    .toFormat("png")
    .toBuffer()
    .then(buffer => {
      // 返回包含base64字段的JSON对象
      sendResponse(200, JSON.stringify({ base64: buffer.toString('base64') }), callback);
    })
    .catch(err => {
      sendResponse(500, JSON.stringify({ error: err.message }), callback);
    });
};

步骤2：替换客户端的文件转换逻辑 #

使用Base64直接转File的函数，替代原有的urltoFile：

// 直接将Base64字符串转换为File对象
function base64ToFile(base64String, filename, mimeType) {
  // 解码Base64字符串
  const byteChars = atob(base64String);
  const byteArrays = [];
  
  // 分块处理字节数据
  for (let offset = 0; offset < byteChars.length; offset += 512) {
    const slice = byteChars.slice(offset, offset + 512);
    const byteNumbers = new Array(slice.length);
    for (let i = 0; i < slice.length; i++) {
      byteNumbers[i] = slice.charCodeAt(i);
    }
    const byteArray = new Uint8Array(byteNumbers);
    byteArrays.push(byteArray);
  }
  
  return new File(byteArrays, filename, { type: mimeType });
}

// 调用转换函数生成文件
const imageFileForUpload = base64ToFile(res.data.base64, 'test.png', 'image/png');

验证逻辑 #

1. Lambda处理后返回的JSON对象中，base64字段是纯净的Base64字符串（无额外引号）；
2. 客户端通过base64ToFile直接将Base64解码为字节数组，生成合法的PNG文件；
3. 上传至Supabase后，下载即可正常打开。

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