Next.js上传Base64图片至Azure Storage后无法渲染的问题

你的核心问题是错误地将图片二进制数据转成Base64字符串上传，导致Blob存储的是Base64文本内容而非原始图片二进制，所以无法被图像编辑器或浏览器识别渲染。

问题根源 #

你当前的代码把req.files?.file.data（原始Buffer）转成Base64字符串后上传，Azure Blob Storage会直接将这个字符串的字节（而非解码后的原始图片字节）写入Blob，最终文件内容是Base64文本，自然无法被当作图片解析。

正确解决方案 #

方案1：直接上传原始Buffer（推荐） #

不需要转Base64，直接使用原始Buffer调用upload方法：

const fileBuffer = req.files?.file.data;
if (!fileBuffer) {
  throw new Error("未获取到上传的文件数据");
}
const uploadBlobResponse = await blockBlobClient.upload(
  fileBuffer,
  fileBuffer.length,
  { blobHTTPHeaders: { blobContentType: body.mimeType } }
);

方案2：使用uploadData方法 #

之前调用uploadData报错是因为可能req.files?.file.data未正确获取（返回了undefined），确保数据存在后直接传入Buffer：

const fileBuffer = req.files?.file.data;
if (!fileBuffer) {
  throw new Error("未获取到上传的文件数据");
}
const uploadBlobResponse = await blockBlobClient.uploadData(fileBuffer, {
  blobHTTPHeaders: { blobContentType: body.mimeType }
});

额外调试建议 #

• 确认你的文件上传中间件（比如multer）配置正确，确保req.files?.file.data确实是原始的Buffer类型
• 上传后可以通过Blob Storage控制台下载文件，查看文件大小：原始图片大小应该和fileBuffer.length一致，如果是Base64上传，文件大小会比原始图片大1/3左右（Base64编码的体积膨胀率）
• 若仍有问题，可以打印req.files?.file的完整结构，确认数据未被篡改

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