前后端分离架构下，用户上传文件应存储在前端还是后端？

在React+FastAPI的前后端分离架构中，用户上传的文件必须存储在后端（FastAPI服务端）或第三方云存储服务，绝对不能存在前端，原因和具体实践如下：

为什么不能存在前端？ #

• 前端运行在用户浏览器环境，没有可靠的持久化存储能力：React应用依托浏览器运行，除了容量极小的localStorage/sessionStorage，没有权限在用户本地磁盘随意存储文件；而且刷新页面、更换设备后，前端存储的内容会直接丢失，完全无法满足文件持久化需求。
• 安全性无保障：存在前端的文件对用户完全透明，任何人都能随意查看、修改或删除，没有权限控制机制，涉及敏感文件的场景根本不可用。
• 无法支撑业务逻辑：后端通常需要对上传文件做校验、解析、格式转换等操作，存在前端的话后端无法触达这些文件，后续的下载、分享、关联业务数据等操作也无法实现。

推荐的存储方案 #

1. 后端本地存储（适合小型测试/演示项目） #

FastAPI原生支持文件上传处理，你可以在后端接收文件后，保存到fastapi目录下的指定文件夹（比如fastapi/uploads/）：

from fastapi import FastAPI, File, UploadFile
import os

app = FastAPI()

# 自动创建上传目录（不存在则生成）
UPLOAD_DIR = "./uploads"
os.makedirs(UPLOAD_DIR, exist_ok=True)

@app.post("/upload-file/")
async def create_upload_file(file: UploadFile = File(...)):
    file_path = os.path.join(UPLOAD_DIR, file.filename)
    with open(file_path, "wb") as f:
        f.write(await file.read())
    return {"file_path": file_path, "filename": file.filename}

注意：这种方式仅适合小体量项目，服务器磁盘空间有限，迁移、扩容都不方便。

2. 第三方云存储（生产环境首选） #

生产环境推荐使用阿里云OSS、腾讯云COS、AWS S3这类云存储服务，后端接收文件后直接上传到云存储，再返回云存储提供的文件访问URL，优势包括：

• 不占用服务器本地磁盘空间
• 自带CDN加速，文件访问速度更快
• 提供完善的权限控制、防盗链、生命周期管理等功能

3. 数据库元信息记录 #

不管采用哪种存储方式，都要在后端数据库中记录文件的元信息，比如：

• 文件名
• 存储路径/云存储URL
• 上传用户ID
• 上传时间
• 文件大小/类型
  后续的文件查询、管理、权限验证都能基于这些元信息实现。

前端的角色 #

前端只需要负责：

• 提供文件选择的UI组件
• 调用后端的上传接口，将文件以FormData的形式发送给后端
• 接收后端返回的文件信息（比如URL），展示给用户或用于后续业务操作

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