FastAPI与Jinja2：实现图片上传与前端展示的完整教程-html教程-PHP中文网

FastAPI与Jinja2：实现图片上传与前端展示的完整教程

霞舞

发布： 2025-10-20 12:36:01

原创

859人浏览过

FastAPI与Jinja2：实现图片上传与前端展示的完整教程

本教程详细介绍了如何使用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

登录后复制

以上就是FastAPI与Jinja2：实现图片上传与前端展示的完整教程的详细内容，更多请关注php中文网其它相关文章！