如何从React应用将.txt文件上传至Azure Blob Storage？

下面提供两种实用的实现方案，覆盖不同场景需求：

方案一：前端直传（使用SAS URL，推荐） #

这种方式无需后端中转，通过SAS（共享访问签名）URL授权前端直接上传文件，避免暴露存储账户密钥。

步骤1：准备Azure资源与SAS URL #

• 在Azure门户创建存储账户和Blob容器（容器权限建议设为私有，通过SAS控制访问）
• 生成容器级或Blob级的SAS URL：可以在Azure门户手动生成，或者通过后端接口动态返回（更安全，避免SAS泄露）

步骤2：安装Azure Blob SDK #

在React项目中安装官方SDK：

npm install @azure/storage-blob

步骤3：React组件实现 #

import { useState } from 'react';
import { BlockBlobClient } from '@azure/storage-blob';

const FileUploader = () => {
  const [selectedFile, setSelectedFile] = useState(null);
  const [uploadStatus, setUploadStatus] = useState('');

  // 处理文件选择
  const handleFileChange = (e) => {
    const file = e.target.files[0];
    // 只允许.txt文件
    if (file && file.type === 'text/plain') {
      setSelectedFile(file);
      setUploadStatus('');
    } else {
      setUploadStatus('请选择.txt格式的文件');
    }
  };

  // 处理上传逻辑
  const handleUpload = async () => {
    if (!selectedFile) {
      setUploadStatus('请先选择文件');
      return;
    }

    try {
      setUploadStatus('上传中...');
      // 替换为你的SAS URL（生产环境建议从后端接口获取动态SAS）
      const sasUrl = 'https://your-storage-account.blob.core.windows.net/your-container/your-file.txt?sv=2022-11-02&ss=bfqt&srt=sco&sp=rwdlacupiytfx&se=2024-12-31T23:59:59Z&st=2024-01-01T00:00:00Z&spr=https&sig=xxx';
      
      const blockBlobClient = new BlockBlobClient(sasUrl);
      // 上传文件
      await blockBlobClient.uploadData(selectedFile);
      
      setUploadStatus('上传成功');
    } catch (error) {
      setUploadStatus(`上传失败：${error.message}`);
      console.error('上传错误:', error);
    }
  };

  return (
    <div>
      <input type="file" accept=".txt" onChange={handleFileChange} />
      <button onClick={handleUpload} disabled={!selectedFile}>
        上传到Azure Blob
      </button>
      {uploadStatus && <p>{uploadStatus}</p>}
    </div>
  );
};

export default FileUploader;

方案二：后端中转上传（更安全，适合敏感场景） #

如果不想在前端暴露任何存储相关的凭证，可通过后端接口中转文件，由后端负责与Azure Blob交互。

步骤1：后端实现（以Node.js为例） #

使用@azure/storage-blob SDK编写上传接口：

const express = require('express');
const multer = require('multer');
const { BlobServiceClient } = require('@azure/storage-blob');

const app = express();
const upload = multer();

// 存储账户连接字符串（建议从环境变量读取）
const connectionString = process.env.AZURE_STORAGE_CONNECTION_STRING;
const blobServiceClient = BlobServiceClient.fromConnectionString(connectionString);
const containerName = 'your-container';

// 上传接口
app.post('/api/upload', upload.single('file'), async (req, res) => {
  try {
    const file = req.file;
    if (!file || file.mimetype !== 'text/plain') {
      return res.status(400).json({ message: '仅支持.txt文件' });
    }

    const containerClient = blobServiceClient.getContainerClient(containerName);
    const blobClient = containerClient.getBlockBlobClient(file.originalname);
    
    await blobClient.uploadData(file.buffer);
    
    res.status(200).json({ message: '上传成功', blobUrl: blobClient.url });
  } catch (error) {
    res.status(500).json({ message: `上传失败：${error.message}` });
  }
});

app.listen(3001, () => console.log('后端服务运行在3001端口'));

步骤2：React前端调用后端接口 #

import { useState } from 'react';

const FileUploader = () => {
  const [selectedFile, setSelectedFile] = useState(null);
  const [uploadStatus, setUploadStatus] = useState('');

  const handleFileChange = (e) => {
    const file = e.target.files[0];
    if (file && file.type === 'text/plain') {
      setSelectedFile(file);
      setUploadStatus('');
    } else {
      setUploadStatus('请选择.txt格式的文件');
    }
  };

  const handleUpload = async () => {
    if (!selectedFile) {
      setUploadStatus('请先选择文件');
      return;
    }

    try {
      setUploadStatus('上传中...');
      const formData = new FormData();
      formData.append('file', selectedFile);

      const response = await fetch('http://localhost:3001/api/upload', {
        method: 'POST',
        body: formData
      });

      const result = await response.json();
      if (response.ok) {
        setUploadStatus('上传成功');
        console.log('Blob URL:', result.blobUrl);
      } else {
        setUploadStatus(result.message);
      }
    } catch (error) {
      setUploadStatus(`上传失败：${error.message}`);
      console.error('上传错误:', error);
    }
  };

  return (
    <div>
      <input type="file" accept=".txt" onChange={handleFileChange} />
      <button onClick={handleUpload} disabled={!selectedFile}>
        上传到Azure Blob
      </button>
      {uploadStatus && <p>{uploadStatus}</p>}
    </div>
  );
};

export default FileUploader;

关键注意事项 #

• 安全优先：绝对不要在前端代码中硬编码存储账户密钥，方案一用动态SAS URL（后端生成），方案二用后端中转
• CORS配置：在Azure存储账户的CORS规则中，允许前端域名的PUT/POST请求，否则会出现跨域错误
• 错误处理：添加上传进度监听、网络异常处理，提升用户体验
• 文件验证：前端和后端都要校验文件类型（确保是.txt），避免非法文件上传

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