本教程详细介绍了如何使用fastapi后端框架与jinja2模板引擎，实现用户图片上传并动态展示的多种方法。内容涵盖了客户端即时预览、服务端处理后以base64编码或静态文件形式展示图片，并提供了详细的代码示例、实现步骤及关键注意事项，旨在帮助开发者构建功能完善的图片上传与显示功能。
在现代Web应用开发中，图片上传与展示是常见且重要的功能。FastAPI作为一款高性能的Python Web框架，结合Jinja2模板引擎，可以高效地实现这一需求。本文将深入探讨几种主流的图片上传与展示方案，包括客户端即时预览、服务端Base64编码返回以及通过静态文件服务展示，并提供详细的实现步骤和代码示例。
一、方法一：客户端即时预览与异步上传
这种方法的核心在于利用浏览器端的 FileReader API 将用户选择的图片转换为 Base64 编码的字符串，从而在不经过服务器的情况下实现图片的即时预览。同时，通过 JavaScript 的 fetch API 异步将图片文件上传到 FastAPI 后端进行保存。
核心原理
- 客户端预览: 当用户选择图片后，JavaScript 读取文件内容并使用 FileReader.readAsDataURL() 方法生成一个数据 URL（Base64 编码），将其赋值给 <img> 标签的 src 属性，实现即时预览。
- 异步上传: 通过 FormData 对象封装文件数据，并使用 fetch API 发送 POST 请求到 FastAPI 后端，实现文件的异步上传，避免页面刷新。
FastAPI 后端 (app.py)
FastAPI 后端主要负责接收上传的文件并将其保存到服务器磁盘。为了提高性能和避免阻塞，建议使用异步文件写入。
from fastapi import File, UploadFile, Request, FastAPI, HTTPException
from fastapi.templating import Jinja2Templates
import aiofiles # 用于异步文件写入
import os
import uuid # 用于生成唯一文件名
app = FastAPI()
templates = Jinja2Templates(directory="templates")
# 为客户端预览示例创建上传目录
UPLOAD_DIR_CLIENT = "uploaded_files_client_preview"
os.makedirs(UPLOAD_DIR_CLIENT, exist_ok=True)
@app.post("/upload")
async def upload_file_for_client_preview(file: UploadFile = File(...)):
"""接收客户端上传的文件并保存"""
# 生成唯一文件名，防止命名冲突
file_extension = os.path.splitext(file.filename)[1]
unique_filename = f"{uuid.uuid4()}{file_extension}"
file_path = os.path.join(UPLOAD 
