React上传图片至Azure Blob Storage报错：TypeError读取size属性失败

错误原因很明确：你调用blockBlobClient.uploadFile()时传入的是file.src，但uploadFile方法要求传入浏览器原生的File对象，而file.src是字符串类型（比如本地文件的预览URL或base64编码），自然没有size属性，所以触发了这个错误。

修复步骤及修正代码 #

1. 确保传入uploadToBlob函数的file参数是真正的File对象（通常来自<input type="file">的change事件）
2. 代码中直接使用File对象，而非它的src属性：

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

const account = process.env.REACT_APP_AZURE_ACCOUNT_NAME;
const sas = process.env.REACT_APP_SAS_TOKEN;

const containerName = 'usercontainer';
const blobServiceClient = new BlobServiceClient(
  `https://${account}.blob.core.windows.net/?${sas}`,
);

export const uploadToBlob = async (file) => {
  const containerClient = blobServiceClient.getContainerClient(containerName);

  // 用File对象的name作为blob名称基础，避免src导致的命名问题
  const blobName = `${file.name}-${new Date().getTime()}`;
  const blockBlobClient = containerClient.getBlockBlobClient(blobName);

  // 直接传入File对象，而非file.src
  const uploadBlobResponse = await blockBlobClient.uploadFile(file);
  console.log(
    `Upload block blob ${blobName} successfully`,
    uploadBlobResponse.requestId,
  );
  
};

补充说明 #

调用uploadToBlob时，要确保传入的是File对象，比如从文件选择框中获取：

// 示例：input文件选择事件处理
const handleFileChange = (e) => {
  const selectedFile = e.target.files[0];
  if (selectedFile) {
    uploadToBlob(selectedFile);
  }
};

如果你的file参数是图片预览的URL对象，需要先将其转换为File对象再传入。

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