使用createObjectURL展示Blob图片时出现损坏图标，求排查解决

核心问题 #

你从DOM中获取的data是字符串形式的数组文本，不是真正的二进制Uint8Array数据。直接把这个字符串传入Blob，相当于把字符串的每个字符（比如数字、逗号、括号）编码成字节，和原始图片的二进制完全不匹配，导致浏览器无法解析为有效图片。

具体修复步骤 #

1. 将字符串数组转为真实的Uint8Array #

修改JS中创建Blob的部分：

if(etat === 'true'){
  console.log('true');
  const dataStr = $('.blob').text().trim();
  // 解析字符串为数字数组，再转为Uint8Array
  const numArray = dataStr.slice(1, -1) // 去掉前后的[]
                          .split(',')
                          .map(item => parseInt(item.trim(), 10)); // 转成数字
  const uint8Array = new Uint8Array(numArray);
  
  // 注意：这里最好用具体的图片MIME类型，比如image/jpeg、image/png，不要用image/*
  const blob = new Blob([uint8Array], {type: 'image/jpeg'}); 
  console.log('blob size: ' + blob.size);
  console.log('blob type: ' + blob.type);
 
  const img = document.createElement("img");
  img.src = URL.createObjectURL(blob);
  img.width = 200;
  img.height = 200;
  
  img.onload = () => {
    URL.revokeObjectURL(img.src);
  };
  
  photo.append(img);
};

2. 优化Blob的MIME类型 #

不要使用image/*这种通配符，浏览器对通配符的支持不好。服务器应该返回上传图片的真实MIME类型（比如从上传文件的content-type获取），然后在模板中渲染出来，比如：

<div class="blob-type"><%= blobType %></div>

然后JS中获取这个类型：

const blobType = $('.blob-type').text().trim();
const blob = new Blob([uint8Array], {type: blobType});

3. 验证数据正确性 #

• 检查控制台打印的dataStr格式是否正确，比如是否是标准的数组字符串（如[255,216,255,224,...]），有没有多余的空格、换行或非数字字符。
• 对比blob.size和原始上传图片的字节数，如果差距很大，说明解析过程出错了。

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