兄弟，我一眼就瞅出问题所在了——你在请求头里设置了Accept: 'application/json'，但你要获取的是JPG图片啊！服务器看到这个请求头，大概率不会返回图片二进制数据，反而可能返回JSON格式的响应（比如某个不匹配的提示信息），这就是为啥你最后得到的Blob size只有2，完全不是预期的图片文件。

另外，其实你根本没必要手动处理ReadableStream这么麻烦，Fetch API本身就提供了直接获取Blob的便捷方法，咱们来把代码改对：

function createFiles(url) {
  fetch('https://....jpg', { 
    method: 'POST',
    // 修正或移除错误的Accept请求头
    headers: { 
      // 要么明确指定接受图片类型，要么直接删掉这个头，让浏览器自动适配
      'Accept': 'image/jpeg, image/png, image/*'
      // 如果服务器需要其他头（比如token、Content-Type），保留在这里即可
    }
  })
  .then(response => {
    // 先检查请求是否成功，避免在错误响应下继续处理
    if (!response.ok) {
      throw new Error(`请求失败，状态码: ${response.status}`);
    }
    return response.blob(); // 直接调用blob()，一步到位转换响应体
  })
  .then(blob => {
    console.log(blob); // 现在应该能拿到正确的图片Blob了
    // 要是需要预览图片，可以把Blob转成URL使用
    const previewUrl = URL.createObjectURL(blob);
    const imgElement = document.createElement('img');
    imgElement.src = previewUrl;
    document.body.appendChild(imgElement);
  })
  .catch(err => console.error('获取Blob出错:', err));
}

关键修复点说明： #

• 修正请求头：Accept头要和你请求的资源类型匹配，图片资源就用image/*或者具体的image/jpeg，或者干脆不设置这个头，浏览器会自动发送合适的请求头给服务器。
• 直接使用response.blob()：Fetch的Response对象内置了这个方法，会帮你自动处理响应流并转换成Blob，比手动操作ReadableStream简洁得多，也不容易出错。
• 增加请求成功校验：通过response.ok判断请求是否成功（状态码200-299），能及时捕获请求失败的情况，避免无效的后续处理。

如果你非要坚持手动处理流的话（虽然完全没必要），那第一步也得先把Accept头改对，然后确保流处理的逻辑正确，但还是强烈推荐用上面的简洁写法。

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