如何将Blob URL上传至Azure Storage？技术实现求助

我来帮你搞定这个问题！首先得指出你之前代码里的核心问题：你把二进制的图片数据当成文本读取了，这直接破坏了PNG文件的原始字节信息，导致上传后的文件无法正常识别。

最优方案：直接用react-dropzone返回的File对象上传 #

其实你完全没必要绕Blob URL这个弯路——react-dropzone的acceptedFiles数组里的每个元素都是标准的File对象，它本身就包含了文件的原始二进制数据、文件名、Content-Type等信息，直接用它上传到Azure Storage是最简单可靠的方式。

如果你用的是Azure Storage的浏览器端SDK（@azure/storage-blob），代码可以这么写：

import { BlobServiceClient } from '@azure/storage-blob';

// 初始化Blob服务客户端（替换成你的Azure连接字符串）
const blobServiceClient = BlobServiceClient.fromConnectionString('你的Azure存储账户连接字符串');
// 获取目标容器客户端
const containerClient = blobServiceClient.getContainerClient('taskcontainer');

// 从react-dropzone拿到选中的文件
const targetFile = acceptedFiles[0];
// 创建目标Blob的客户端
const blockBlobClient = containerClient.getBlockBlobClient(targetFile.name);

// 直接上传File对象，还能指定Content-Type确保文件类型正确
blockBlobClient.uploadData(targetFile, {
  blobHTTPHeaders: {
    blobContentType: targetFile.type // 自动获取文件的MIME类型，比如image/png
  }
})
.then(uploadResult => {
  console.log('文件上传成功！', uploadResult);
})
.catch(error => {
  console.error('上传失败：', error);
});

如果你非要通过Blob URL上传（不推荐） #

如果因为某些原因必须从Blob URL读取数据，那一定要保证读取的是二进制Blob数据，而不是文本。你之前把xhr.responseType设为text是致命错误，修改后的代码如下：

const blobUrl = acceptedFiles[0].preview;
const xhr = new XMLHttpRequest();
xhr.open('GET', blobUrl);
xhr.responseType = 'blob'; // 关键：设为blob，保留二进制数据
xhr.onload = function() {
  if (xhr.status === 200) {
    const fileBlob = xhr.response;
    // 同样用Azure浏览器SDK上传这个Blob
    const blockBlobClient = containerClient.getBlockBlobClient('myblob.png');
    blockBlobClient.uploadData(fileBlob, {
      blobHTTPHeaders: {
        blobContentType: fileBlob.type // 或者直接指定为'image/png'
      }
    })
    .then(res => console.log('Blob URL上传成功'))
    .catch(err => console.error('上传出错：', err));
  }
};
xhr.send();

为什么你之前的代码会失败？ #

当你把responseType设为text时，浏览器会把二进制的PNG文件转换成UTF-8字符串，这个过程中很多字节会被错误编码，导致原始文件结构被破坏。上传这种被篡改过的数据后，自然无法被识别为有效的PNG文件。

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