React应用中Google Cloud Storage可恢复上传：实现分片即时可用需求咨询

Google Cloud Storage的可恢复上传机制本身是将所有分片临时存储，直到最后一个分片上传完成后才会组装成完整的可见对象，所以无法直接通过这种方式实现分片上传后立即可用的需求。要达成你的目标，需要换一种上传策略：将每个视频chunk作为独立的GCS对象上传，而非用单文件的可恢复分块上传。

具体实现步骤如下：

1. 调整上传策略：每个Chunk作为独立对象上传 #

放弃传统的可恢复上传流程，改为为每个录制生成的chunk单独生成上传凭证，上传后每个chunk都是GCS中独立的可读对象，后端可以立即获取并处理。

2. 后端生成每个Chunk的Signed URL #

前端在每次准备上传一个chunk时，需要向你的后端发送以下信息：

• 原始视频的唯一标识（比如UUID或用户自定义文件名）
• 当前chunk的索引（从0或1开始递增）
• 总chunk数量（可选，用于后端后续合并）
• chunk的文件大小

后端根据这些信息，为每个chunk生成唯一的对象路径（比如recordings/user123/video-abc123-chunk-001），并生成对应的Signed URL，同时设置该URL的权限为上传后允许读取。

3. 前端上传Chunk到GCS #

在React应用中，每生成一个视频chunk，就使用对应的Signed URL发起PUT请求完成上传：

// React中上传单个chunk的示例代码
const uploadChunk = async (chunkBlob, signedUrl, chunkIndex, originalId) => {
  try {
    const response = await fetch(signedUrl, {
      method: 'PUT',
      body: chunkBlob,
      headers: {
        'Content-Type': 'video/mp4', // 根据你的视频格式调整
        'x-goog-meta-chunk-index': chunkIndex, // 标记chunk索引
        'x-goog-meta-original-id': originalId // 标记原始视频ID
      }
    });
    if (response.ok) {
      // 上传成功，通知后端该chunk已就绪
      await fetch('/api/notify-chunk-ready', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({
          originalId,
          chunkIndex,
          chunkPath: `recordings/user123/${originalId}-chunk-${chunkIndex.toString().padStart(3, '0')}`
        })
      });
    }
  } catch (error) {
    // 处理上传失败，可添加重试逻辑
    console.error(`Chunk ${chunkIndex} upload failed:`, error);
  }
};

4. 后端实时处理Chunk #

后端收到前端的chunk就绪通知后，直接通过GCS API读取对应的chunk对象，启动处理逻辑（比如视频转码、帧分析等）。如果最终需要完整视频文件，可以在所有chunk上传完成后，使用GCS的combine操作将多个chunk对象合并为一个完整文件：

# 后端合并chunk的示例（Python）
from google.cloud import storage

def combine_chunks(bucket_name, original_id, total_chunks, user_id):
    storage_client = storage.Client()
    bucket = storage_client.bucket(bucket_name)
    
    # 按索引排序所有chunk对象
    chunk_paths = [
        f'recordings/{user_id}/{original_id}-chunk-{i:03d}' 
        for i in range(total_chunks)
    ]
    blobs = [bucket.blob(path) for path in chunk_paths]
    
    # 合并为完整文件
    destination_blob = bucket.blob(f'recordings/{user_id}/{original_id}-complete.mp4')
    destination_blob.compose(blobs)
    
    # 可选：删除单个chunk对象，节省存储空间
    for blob in blobs:
        blob.delete()

关键注意事项 #

• 对象命名规范：确保每个chunk的路径唯一且有序，避免覆盖或排序混乱。
• 元数据管理：通过x-goog-meta-*自定义元数据标记chunk的索引、原始文件ID等信息，方便后端识别和排序。
• 成本控制：每个chunk是独立对象，会增加GCS的对象数量计费，但对于视频录制场景，chunk数量通常在可接受范围内。
• 重试机制：前端需处理chunk上传失败的情况，重新请求对应chunk的Signed URL并重传。

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