求助：React前端直传大文件至GCS的本地路径获取方案

首先得给你泼个冷水：浏览器出于安全限制，绝对不会允许网页获取用户本地文件的真实路径——你拿到的文件名只是浏览器给的一个虚拟标识，所以直接把本地路径传给Flask用upload_from_filename()的思路根本走不通。不过别担心，有两种成熟的方案能实现你的大文件直传需求，完全绕开这个问题：

方案一：使用GCS签名URL（推荐，大文件最优解） #

这是Google官方推荐的大文件直传方案：让Flask后端生成一个临时的签名URL，前端直接用这个URL把文件上传到GCS，完全不经过你的Web服务器，既省资源又支持断点续传，完美适配10GB的大文件。

步骤分解： #

1. 前端请求Flask后端获取签名URL
2. 前端通过签名URL直接PUT文件到GCS
3. 上传完成后前端通知Flask，触发BigQuery导入流程

Flask端生成签名URL的代码：

from google.cloud import storage
from datetime import timedelta
from flask import current_user, request, jsonify

@app.route('/get-signed-url', methods=['POST'])
def get_signed_url():
    # 先做用户认证校验，确保是已授权用户
    if not current_user.is_authenticated:
        return jsonify({"error": "Unauthorized"}), 401

    bucket_name = "your-gcs-bucket-name"
    # 自定义存储路径，用用户ID区分避免文件重名
    destination_blob_name = f"uploads/{current_user.id}/{request.json['filename']}"  

    storage_client = storage.Client()
    bucket = storage_client.get_bucket(bucket_name)
    blob = bucket.blob(destination_blob_name)

    # 生成有效期为1小时的签名URL，允许PUT操作
    signed_url = blob.generate_signed_url(
        version="v4",
        expiration=timedelta(hours=1),
        method="PUT",
        content_type="text/csv"  # 匹配CSV文件类型
    )

    return jsonify({
        "signed_url": signed_url,
        "blob_path": destination_blob_name  # 后续给BigQuery用的存储路径
    })

React前端上传的代码：

const uploadToGCS = async (file) => {
  // 先请求后端获取签名URL
  const response = await fetch('/get-signed-url', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      // 带上用户认证token，比如JWT
      'Authorization': `Bearer ${localStorage.getItem('authToken')}`
    },
    body: JSON.stringify({ filename: file.name })
  });
  const { signed_url, blob_path } = await response.json();

  // 直接上传文件到GCS
  await fetch(signed_url, {
    method: 'PUT',
    headers: {
      'Content-Type': 'text/csv'
    },
    body: file
  });

  // 上传完成后通知后端触发BigQuery导入
  await fetch('/trigger-bq-import', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${localStorage.getItem('authToken')}`
    },
    body: JSON.stringify({ blob_path })
  });
};

// 绑定文件选择事件
const handleFileChange = (e) => {
  const file = e.target.files[0];
  if (file && file.type === 'text/csv') {
    uploadToGCS(file);
  }
};

方案二：流式上传到Flask再转存GCS（适合需要服务器预处理的场景） #

如果你的业务必须经过Flask服务器（比如要做文件格式校验、内容预处理），可以用流式上传：前端把文件以流的形式传给Flask，Flask直接把流转发到GCS，不用把整个文件存在服务器磁盘上。

Flask端流式上传代码：

from google.cloud import storage
from flask import current_user, request, jsonify

def trigger_bq_import(blob_path):
    # 这里写你的BigQuery导入逻辑
    pass

@app.route('/upload-to-gcs', methods=['POST'])
def upload_to_gcs():
    if not current_user.is_authenticated:
        return jsonify({"error": "Unauthorized"}), 401

    file = request.files['file']
    # 校验文件格式
    if not file or file.filename.split('.')[-1].lower() != 'csv':
        return jsonify({"error": "Invalid file type, only CSV allowed"}), 400

    bucket_name = "your-gcs-bucket-name"
    destination_blob_name = f"uploads/{current_user.id}/{file.filename}"

    storage_client = storage.Client()
    bucket = storage_client.get_bucket(bucket_name)
    blob = bucket.blob(destination_blob_name)

    # 直接从请求流上传到GCS，无需保存到服务器本地
    blob.upload_from_file(file, content_type="text/csv")

    # 触发BigQuery导入流程
    trigger_bq_import(destination_blob_name)

    return jsonify({"message": "Upload successful, BigQuery import started"}), 200

React前端上传代码：

const uploadViaFlask = async (file) => {
  const formData = new FormData();
  formData.append('file', file);

  const response = await fetch('/upload-to-gcs', {
    method: 'POST',
    headers: {
      'Authorization': `Bearer ${localStorage.getItem('authToken')}`
      // 注意：FormData上传时不要手动设置Content-Type，浏览器会自动处理边界符
    },
    body: formData
  });

  if (response.ok) {
    const result = await response.json();
    console.log(result.message);
  }
};

关键提示 #

• 对于10GB的大文件，方案一的签名URL是首选，因为它完全绕过你的服务器，避免了大文件传输给服务器带来的带宽和内存压力，而且GCS原生支持断点续传（如果用官方JS SDK还能实现分块上传）。
• 不管用哪种方案，都要在Flask端做好用户认证校验，确保只有授权用户能上传文件。
• BigQuery导入可以通过GCS的事件触发器（比如Cloud Function）自动触发，不用等前端通知，这样流程更可靠。

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