如何通过React表单将文件存储到Azure Table中？

首先明确：Azure Table是结构化键值存储，本身不直接支持二进制文件存储，所以核心思路是把文件转成Base64编码的字符串后存入实体属性。但要注意单个Table实体最大容量是1MB，如果你的文件大多超过这个大小，优先考虑用Azure Blob Storage存文件，再把Blob的访问URL存在Table里。以下是针对小文件的完整实现流程：

1. React前端处理文件上传与编码 #

在React组件里，通过文件选择框获取用户上传的文件，用FileReader把文件转成Base64字符串，同时收集文件名、文件类型等元数据，一起传给后端接口：

import { useState } from 'react';

function FileUploader() {
  const [selectedFile, setSelectedFile] = useState(null);

  const handleFileChange = (e) => {
    setSelectedFile(e.target.files[0]);
  };

  const handleUpload = async () => {
    if (!selectedFile) return;

    // 将文件转成Base64（去掉data URL前缀）
    const reader = new FileReader();
    reader.onload = async (event) => {
      const base64Content = event.target.result.split(',')[1];
      const uploadData = {
        fileName: selectedFile.name,
        fileType: selectedFile.type,
        fileSize: selectedFile.size,
        content: base64Content
      };

      // 调用后端接口完成存储
      try {
        await fetch('/api/upload-to-table', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(uploadData)
        });
        alert('文件上传成功');
      } catch (err) {
        console.error('上传失败:', err);
      }
    };
    reader.readAsDataURL(selectedFile);
  };

  return (
    <div>
      <input 
        type="file" 
        accept=".pdf,.doc,.docx,.jpg,.jpeg,.png" 
        onChange={handleFileChange} 
      />
      <button onClick={handleUpload} disabled={!selectedFile}>上传文件</button>
    </div>
  );
}

export default FileUploader;

2. 后端处理Azure Table存储 #

绝对不能在前端直接使用Azure Table的连接字符串或密钥，必须通过后端代理操作。以下用Node.js + Azure Table SDK为例：

首先安装依赖：

npm install @azure/data-tables express

然后编写后端接口：

const express = require('express');
const { TableClient, AzureNamedKeyCredential } = require('@azure/data-tables');
const app = express();
app.use(express.json());

// 配置Azure Table连接信息
const accountName = '你的存储账户名';
const accountKey = '你的存储账户密钥';
const tableName = '你的目标表名';
const credential = new AzureNamedKeyCredential(accountName, accountKey);
const tableClient = new TableClient(`https://${accountName}.table.core.windows.net`, tableName, credential);

// 确保目标表存在（首次运行自动创建）
async function initTable() {
  try {
    await tableClient.createTable();
  } catch (err) {
    if (err.statusCode !== 409) { // 409代表表已存在，忽略该错误
      console.error('创建表失败:', err);
    }
  }
}
initTable();

// 文件上传接口
app.post('/api/upload-to-table', async (req, res) => {
  const { fileName, fileType, fileSize, content } = req.body;

  // 生成唯一的PartitionKey和RowKey（可根据业务规则自定义）
  const partitionKey = 'user-uploads';
  const rowKey = `${Date.now()}-${fileName}`;

  try {
    // 向Table插入包含文件数据的实体
    await tableClient.createEntity({
      partitionKey,
      rowKey,
      fileName,
      fileType,
      fileSize,
      content // 存储Base64编码的文件内容
    });
    res.status(200).json({ message: '文件已存入Azure Table' });
  } catch (err) {
    console.error('存储失败:', err);
    res.status(500).json({ error: '存储失败，请重试' });
  }
});

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

3. 关键注意事项 #

• 文件大小限制：Azure Table单个实体最大1MB，超过的文件请改用Azure Blob Storage，Table仅存储Blob的URL和元数据。
• Base64开销：Base64编码会让文件体积增加约30%，计算实际存储容量时需考虑这一点。
• 安全规范：后端的存储账户密钥要通过环境变量管理，不要硬编码在代码中；生产环境建议用Azure AD认证替代账户密钥。
• 文件读取：后续需要读取文件时，从Table取出Base64字符串，转成Blob后即可在前端展示或下载。

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