本教程深入探讨了在fastapi和jinja2框架下，实现用户上传图片并进行展示的多种技术方案。文章涵盖了客户端即时预览（利用`filereader`）、服务端处理（通过base64编码或静态文件服务）等核心方法，并提供了详细的代码示例、最佳实践与注意事项，旨在帮助开发者根据实际项目需求选择最合适的图片展示策略。
在现代Web应用中，用户上传图片并实时或异步展示是常见的需求。结合FastAPI的强大后端能力和Jinja2的灵活前端模板渲染，我们可以构建高效且用户友好的图片上传与展示功能。本文将详细介绍几种实现方案，并提供相应的代码示例。
这种方法的核心思想是在图片上传到服务器之前，利用浏览器端的JavaScript能力（FileReader API）直接在本地预览图片。这不仅提供了即时反馈，还能减少不必要的服务器负载。
此方案在用户选择图片后，立即在页面上显示预览，并同时将文件上传至服务器。
后端 app.py 配置：
from fastapi import File, UploadFile, Request, FastAPI, HTTPException
from fastapi.templating import Jinja2Templates
app = FastAPI()
templates = Jinja2Templates(directory="templates")
@app.post("/upload")
async def upload(file: UploadFile = File(...)):
"""
处理文件上传，将文件保存到本地。
注意：生产环境中应考虑异步写入（如使用aiofiles）和唯一文件名。
"""
try:
# 读取文件内容
contents = await file.read() # 使用await读取文件内容
# 保存文件到本地，建议使用更安全和唯一的文件名
with open(f"uploaded_{file.filename}", "wb") as f:
f.write(contents)
except Exception:
raise HTTPException(status_code=500, detail='文件上传失败')
finally:
await file.close() # 确保文件句柄关闭
return {"message": f"成功上传文件: {file.filename}"}
@app.get("/")
async def main(request: Request):
"""
渲染主页，包含文件上传和预览功能。
"""
return templates.TemplateResponse("index.html", {"request": request})
前端 templates/index.html 配置：
<!DOCTYPE html>
<html>
<head>
<title>图片上传与预览</title>
</head>
<body>
<script type="text/javascript">
function previewFile() {
const preview = document.querySelector('img');
const file = document.querySelector('input[type=file]').files[0];
const reader = new FileReader();
reader.addEventListener("load", function() {
// 将图片数据显示到<img>标签的src属性
preview.src = reader.result;
// 预览后立即上传文件
uploadFile(file);
}, false);
if (file) {
// 读取文件内容为Data URL (Base64编码)
reader.readAsDataURL(file);
}
}
function uploadFile(file) {
var formData = new FormData();
formData.append('file', file); // 将文件添加到FormData
fetch('/upload', {
method: 'POST',
body: formData,
})
.then(response => {
console.log(response);
// 可以根据响应显示上传成功或失败信息
})
.catch(error => {
console.error('上传失败:', error);
});
}
</script>
<h1>上传图片</h1>
<input type="file" onchange="previewFile()"><br>
<img src="" height="200" alt="图片预览...">
</body>
</html>如果希望用户在预览图片后，手动点击按钮才触发上传操作，可以修改前端逻辑。
前端 templates/index.html (部分修改):
<!-- ... (JavaScript部分) ... -->
<script type="text/javascript">
var selectedFile = null; // 用于存储选择的文件
function previewFile() {
const preview = document.querySelector('img');
selectedFile = document.getElementById('fileInput').files[0]; // 获取文件
const reader = new FileReader();
reader.addEventListener("load", function() {
preview.src = reader.result; // 显示图片预览
}, false);
if (selectedFile) {
reader.readAsDataURL(selectedFile);
}
}
function uploadFile() {
if (selectedFile) { // 检查是否有文件被选择
var formData = new FormData();
formData.append('file', selectedFile);
fetch('/upload', {
method: 'POST',
body: formData,
})
.then(response => response.json())
.then(data => {
document.getElementById("serverMsg").innerHTML = data.message; // 显示服务器消息
})
.catch(error => {
console.error('上传失败:', error);
document.getElementById("serverMsg").innerHTML = '上传失败';
});
} else {
document.getElementById("serverMsg").innerHTML = '请先选择一个文件。';
}
}
</script>
<!-- ... (HTML部分) ... -->
<input type="file" id="fileInput" onchange="previewFile()"><br>
<input type="button" value="上传图片" onclick="uploadFile()">
<p id="serverMsg"></p>
<img height="200" alt="图片预览...">有时，用户可能希望在一个新的浏览器标签页中查看上传的图片。
前端 templates/index.html (部分修改):
<!-- ... (JavaScript部分) ... -->
<script type="text/javascript">
function previewFile() {
var file = document.getElementById('fileInput').files[0];
const reader = new FileReader();
reader.addEventListener("load", function () {
displayImgInNewTab(reader.result) // 在加载完成后在新标签页显示
}, false);
if (file) {
reader.readAsDataURL(file);
}
}
function uploadFile() {
var file = document.getElementById('fileInput').files[0];
if (file) {
var formData = new FormData();
formData.append('file', file);
fetch('/upload', {
method: 'POST',
body: formData,
})
.then(response => response.json())
.then(data => {
document.getElementById("serverMsg").innerHTML = data.message;
})
.catch(error => {
console.error(error);
});
previewFile(); // 上传后在新标签页预览
}
}
function displayImgInNewTab(data) {
var image = new Image();
image.src = data;
var w = window.open(""); // 打开新窗口
w.document.write(image.outerHTML); // 将图片写入新窗口
w.document.close(); // 关闭文档流
}
</script>
<!-- ... (HTML部分) ... -->
<input type="file" id="fileInput"><br> <!-- 移除onchange事件，改为点击按钮触发 -->
<input type="button" value="上传图片并预览" onclick="uploadFile()">
<p id="serverMsg"></p>
<img height="200">当图片需要经过服务端处理、持久化存储或在其他页面展示时，服务端处理是必不可少的。主要有两种方式：Base64编码和静态文件服务。
此方法将图片文件在服务器端读取并编码为Base64字符串，然后将该字符串作为数据嵌入到HTML模板中，由浏览器解码显示。
后端 app.py 配置：
from fastapi import File, UploadFile, Request, FastAPI, HTTPException
from fastapi.templating import Jinja2Templates
import base64
app = FastAPI()
templates = Jinja2Templates(directory="templates")
@app.get("/")
async def main(request: Request):
return templates.TemplateResponse("index.html", {"request": request})
@app.post("/upload")
async def upload(request: Request, file: UploadFile = File(...)):
try:
contents = await file.read() # 读取文件内容
# 可选：将文件保存到本地
with open(f"uploaded_{file.filename}", "wb") as f:
f.write(contents)
except Exception:
raise HTTPException(status_code=500, detail='文件上传失败')
finally:
await file.close()
# 将图片内容编码为Base64字符串
base64_encoded_image = base64.b64encode(contents).decode("utf-8")
# 渲染显示页面，并将Base64字符串传递给模板
return templates.TemplateResponse("display.html", {"request": request, "myImage": base64_encoded_image})前端 templates/index.html 配置：
<!DOCTYPE html>
<html>
<body>
<h1>选择图片上传</h1>
<form method="post" action="/upload" enctype="multipart/form-data">
<label for="file">选择图片文件</label>
<input type="file" id="files" name="file" accept="image/*"><br>
<input type="submit" value="上传">
</form>
</body>
</html>前端 templates/display.html 配置：
<!DOCTYPE html>
<html>
<head>
<title>显示上传图片</title>
</head>
<body>
<h1>我的图片</h1>
<!-- 使用data URI方案显示Base64编码的图片 -->
<img src="data:image/jpeg;base64,{{ myImage | safe }}" alt="上传的图片">
<!-- 注意：`| safe` 过滤器用于防止Jinja2对Base64字符串进行HTML转义 -->
</body>
</html>优点：
缺点：
此方法将上传的图片保存到服务器上的一个静态文件目录，然后通过FastAPI的静态文件服务功能，在Jinja2模板中引用该图片的URL进行展示。
后端 app.py 配置：
from fastapi import FastAPI, File, UploadFile, Request, HTTPException
from fastapi.responses import HTMLResponse
from fastapi.staticfiles import StaticFiles
from fastapi.templating import Jinja2Templates
import os
import uuid # 用于生成唯一文件名
app = FastAPI()
# 挂载静态文件目录。所有保存到"static/uploads"的图片将通过"/static/uploads/"路径访问
# 建议将上传文件放在static子目录中，避免与静态资源混淆
UPLOAD_DIR = "static/uploads"
os.makedirs(UPLOAD_DIR, exist_ok=True) # 确保上传目录存在
app.mount("/static", StaticFiles(directory="static"), name="static")
templates = Jinja2Templates(directory="templates")
@app.get("/")
async def root(request: Request):
return templates.TemplateResponse("upload_form.html", {"request": request})
@app.post("/upload-image")
async def upload_image(request: Request, file: UploadFile = File(...)):
# 生成唯一文件名，防止命名冲突和安全问题
file_extension = os.path.splitext(file.filename)[1]
unique_filename = f"{uuid.uuid4()}{file_extension}"
file_path = os.path.join(UPLOAD_DIR, unique_filename)
try:
contents = await file.read()
with open(file_path, "wb") as f:
f.write(contents)
except Exception:
raise HTTPException(status_code=500, detail='文件上传失败')
finally:
await file.close()
# 构建图片的公共访问URL
image_url = app.url_path_for("static", path=f"uploads/{unique_filename}")
# 渲染显示页面，传递图片URL
return templates.TemplateResponse("display_static.html", {"request": request, "imageUrl": image_url})
前端 templates/upload_form.html 配置：
<!DOCTYPE html>
<html>
<head>
<title>上传图片</title>
</head>
<body>
<h1>上传图片到服务器</h1>
<form action="/upload-image" method="post" enctype="multipart/form-data">
<input type="file" name="file" accept="image/*" required/>
<input type="submit" value="上传并显示" />
</form>
</body>
</html>前端 templates/display_static.html 配置：
<!DOCTYPE html>
<html>
<head>
<title>显示静态图片</title>
</head>
<body>
<h1>您上传的图片</h1>
<!-- 使用Jinja2的url_for或直接传入的URL显示图片 -->
<img src="{{ imageUrl }}" alt="上传的图片" width="400">
</body>
</html>优点：
缺点：
无论选择哪种方案，以下几点都是在开发图片上传和展示功能时需要考虑的：
import aiofiles
# ...
async def upload_file(file: UploadFile = File(...)):
file_path = os.path.join(UPLOAD_DIR, unique_filename)
async with aiofiles.open(file_path, "wb") as f:
await f.write(await file.read())
# ...本文详细介绍了在FastAPI和Jinja2环境下实现图片上传与展示的两种主要策略：客户端即时预览和服务器端处理。客户端预览提供了即时反馈，适用于快速预览；而服务器端处理则根据需求分为Base64编码和静态文件服务，分别适用于小型图片嵌入和大型图片持久化存储的场景。
选择合适的方案取决于项目的具体需求，如性能要求、图片数量与大小、安全性考量以及是否需要服务端对图片进行进一步处理等。结合最佳实践和注意事项，开发者可以构建出健壮、高效且用户友好的图片上传与展示功能。
以上就是FastAPI与Jinja2：实现图片上传与展示的完整教程的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
826
收藏
