Azure Blob SAS URL上传图片至MediaValet无法渲染问题求助

看起来你踩了一个二进制上传的典型坑——你的PUT请求body格式完全错误！Azure Blob的SAS URL上传要求直接发送原始二进制数据，但你现在传的是带data:image/png;base64,前缀的Data URI字符串，这就导致Blob里存的根本不是有效PNG文件，自然会被MediaValet识别成无效内容，显示占位符。

核心问题修正 #

你当前的PUT请求body是data:image/png;base64,iVBO...，这相当于把图片的base64编码文本（还带冗余前缀）当成二进制上传了。Azure只会忠实地存储这些文本内容，而MediaValet需要的是原始PNG二进制流，所以才会无法渲染。

正确的上传代码示例 #

基于你现有的逻辑，直接修改PUT请求部分即可，全程保留原始Buffer，不要做多余的编码转换：

const request = require('request');

// 1. 获取原始图片的Buffer（这部分你已经做对了）
const imageUri = 'https://img2.pngio.com/stack-overflow-text-png-download-1024257-free-transparent-stack-overflow-png-900_240.jpg';
request.get({ uri: imageUri, encoding: null }, (err, res, imageBuffer) => {
  if (err) {
    console.error('获取图片失败:', err);
    return;
  }

  // 2. 构造正确的PUT请求到SAS URL
  const sasUrl = 'https://OBFUSCATED.blob.core.windows.net/medialibrary-OBFUSCATED/OBFUSCATED/OBFUSCATED/Original/1571880311.png?sv=2017-04-17&sr=b&sig=KHCrukoT16oc0s%2Bjqt%2Fow3CGjIc0rxYPdvRMgbErUtw%3D&st=2020-06-09T22%3A13%3A48Z&se=2020-06-11T22%3A28%3A48Z&sp=rw';
  
  request.put({
    uri: sasUrl,
    headers: {
      'Content-Length': imageBuffer.length, // 直接用Buffer的实际长度，确保准确
      'Content-Type': 'image/png', // 去掉charset=UTF-8，二进制数据不需要字符集
      'x-ms-blob-content-type': 'image/png',
      'x-ms-date': new Date().toUTCString(), // 用当前UTC时间，避免时间过期问题
      'x-ms-blob-type': 'BlockBlob'
    },
    body: imageBuffer // 直接传递原始Buffer，不要转base64或加任何前缀
  }, (putErr, putRes) => {
    if (putErr) {
      console.error('上传失败:', putErr);
      return;
    }
    console.log('上传成功，状态码:', putRes.statusCode);
    // 可选验证：通过SAS URL下载Blob内容，保存为PNG看是否能正常打开
  });
});

额外检查要点 #

• 请求头准确性：x-ms-date必须是有效的UTC时间，避免因时间偏差导致SAS权限失效；Content-Length要和imageBuffer.length完全一致，否则Azure可能截断文件或返回错误。
• Blob内容验证：上传完成后，手动通过SAS URL下载Blob内容，保存为PNG文件。如果能正常打开，说明上传环节没问题；如果还是不行，再排查MediaValet的解析逻辑。
• 避免冗余编码：你已经确认encoding: null得到的Buffer是有效的，所以全程不要做toString('base64')或Buffer.from()这类多余转换，防止引入编码错误。

为什么之前的base64转换能正常显示？ #

因为在线工具会自动识别data:image/png;base64,...前缀，解码后还原成原始图片；但Azure Blob不会做这个解析，它会把整个字符串当成文件内容存储，最终的文件本质是文本文件，而非PNG二进制文件。

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