使用FastAPI与Jinja2高效显示上传图片教程-html教程-PHP中文网

使用FastAPI与Jinja2高效显示上传图片教程

本教程详细探讨了在fastapi应用中结合jinja2模板显示用户上传图片的三种主要方法：客户端base64预览、服务器端base64编码传递以及通过静态文件服务。文章涵盖了从即时预览到服务器处理的多种场景，并提供了完整的代码示例、实现细节、以及关键的安全与性能考量，旨在帮助开发者根据项目需求选择最合适的图片显示策略。

1. 引言：FastAPI与Jinja2中的图片显示挑战

在Web开发中，允许用户上传图片并立即在页面上显示是一个常见需求。使用FastAPI作为后端框架和Jinja2作为模板引擎时，如何有效地处理图片上传和显示，同时兼顾用户体验、性能和安全性，是开发者需要解决的问题。本教程将深入探讨几种实现此功能的策略，从客户端即时预览到服务器端处理，并提供详细的代码示例和注意事项。

最初的尝试可能是在服务器端保存图片后，直接在Jinja2模板中使用相对路径引用，例如 <img src="{{./filename}}">。然而，这种方法通常无法奏效，因为浏览器需要一个可访问的URL来加载图片，而不仅仅是文件系统中的路径。FastAPI需要配置静态文件服务或通过其他机制将图片内容提供给前端。

2. 方法一：客户端Base64即时预览与上传

这种方法的核心思想是利用浏览器内置的FileReader API在客户端将图片文件转换为Base64编码的字符串，并直接将其赋值给<img>标签的src属性进行预览。同时，图片文件可以异步上传到服务器。这种方式的优点是用户可以即时看到预览，无需等待服务器响应，从而提升用户体验。

2.1 核心原理

FileReader.readAsDataURL(): 这是一个异步方法，用于读取指定Blob或File的内容。当读取完成时，readyState会变为DONE，并且result属性中将包含一个data:URL格式的字符串，该字符串表示文件的数据，Base64编码。
客户端预览: 将reader.result直接赋给<img>标签的src属性。
异步上传: 使用fetch API将文件通过FormData对象异步发送到FastAPI后端。

2.2 FastAPI 后端配置 (app.py)

FastAPI后端负责接收上传的图片文件并将其保存到服务器。

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(...)):
    """
    接收上传的图片文件并保存到本地。
    注意：生产环境中应考虑异步写入、文件名冲突和存储位置。
    """
    try:
        # 读取文件内容，这里使用同步读取，生产环境可考虑异步io
        contents = await file.read() # 使用await file.read() for async
        # 建议使用UUID生成唯一文件名，防止冲突
        with open(f"uploaded_{file.filename}", "wb") as f:
            f.write(contents)
    except Exception:
        raise HTTPException(status_code=500, detail='文件上传失败')
    finally:
        # 确保文件句柄关闭
        await file.close() # 使用await file.close() for async

    return {"message": f"成功上传文件: {file.filename}"}

@app.get("/")
async def main(request: Request):
    """
    渲染主页面，包含图片上传和预览功能。
    """
    return templates.TemplateResponse("index.html", {"request": request})

登录后复制

2.3 Jinja2 模板 (templates/index.html)

前端页面包含一个文件输入框和用于显示预览的<img>标签，以及相关的JavaScript逻辑。

<!DOCTYPE html>
<html>
<head>
    <title>图片上传与预览</title>
</head>
<body>
    <script type="text/javascript">
        // 预览文件函数：将选定的图片转换为Base64并显示
        function previewFile() {
            const preview = document.querySelector('img'); // 获取图片预览元素
            const fileInput = document.querySelector('input[type=file]');
            const file = fileInput.files[0]; // 获取第一个选定的文件
            const reader = new FileReader(); // 创建FileReader对象

            // 当文件读取完成时触发
            reader.addEventListener("load", function() {
                preview.src = reader.result; // 将Base64编码的图片数据赋值给<img>的src
                // 立即上传文件到服务器（可选，根据需求决定是否自动上传）
                uploadFile(file); 
            }, false);

            // 如果文件存在，则开始读取文件内容
            if (file) {
                reader.readAsDataURL(file); // 读取文件为Data URL（Base64编码）
            }
        }

        // 上传文件到服务器函数
        function uploadFile(file) {
            var formData = new FormData();
            formData.append('file', file); // 将文件添加到FormData

            fetch('/upload', {
                    method: 'POST',
                    body: formData, // 发送FormData
                })
                .then(response => {
                    console.log('文件上传响应:', response);
                    // 可以在这里处理服务器返回的消息，例如显示上传成功或失败
                })
                .catch(error => {
                    console.error('文件上传错误:', error);
                });
        }
    </script>

    <!-- 文件输入框，当选择文件时调用previewFile函数 -->
    <input type="file" onchange="previewFile()"><br>
    <!-- 图片预览区域 -->
    <img src="" height="200" alt="图片预览...">
</body>
</html>

登录后复制

2.4 扩展：点击按钮上传和新标签页预览

2.4.1 点击按钮上传

如果希望用户在选择图片后，点击一个按钮才触发上传，可以修改JavaScript逻辑：

<!-- templates/index.html (点击按钮上传版本) -->
<!DOCTYPE html>
<html>
<head>
    <title>图片上传与预览 (按钮上传)</title>
</head>
<body>
    <script type="text/javascript">
        function previewFile() {
            const preview = document.querySelector('img');
            var file = document.getElementById('fileInput').files[0];
            const reader = new FileReader();
            reader.addEventListener("load", function() {
                preview.src = 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);
                    });
            }
        }
    </script>
    <input type="file" id="fileInput" onchange="previewFile()"><br>
    <input type="button" value="上传图片" onclick="uploadFile()">
    <p id="serverMsg"></p>
    <img height="200" alt="图片预览...">
</body>
</html>

登录后复制

2.4.2 新标签页预览

如果需要在新标签页中显示预览，可以在previewFile函数中调用一个新函数：

<!-- templates/index.html (新标签页预览版本) -->
<!DOCTYPE html>
<html>
<head>
    <title>图片上传与预览 (新标签页)</title>
</head>
<body>
    <script type="text/javascript">
        function previewFile() {
           const preview = document.querySelector('img'); // 这里的preview img不再直接显示
           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); // 将图片写入新窗口
        }
    </script>
    <input type="file" id="fileInput"><br> <!-- 移除onchange事件，改为点击按钮触发 -->
    <input type="button" value="上传图片" onclick="uploadFile()">
    <p id="serverMsg"></p>
    <img height="200" alt="图片预览..."> <!-- 这个img标签不再用于预览，可以移除或用于其他目的 -->
</body>
</html>

登录后复制

3. 方法二：服务器端Base64编码并返回Jinja2模板

如果希望服务器在接收到图片后进行处理（例如缩放、水印、存储到数据库等），然后将处理后的图片返回给客户端显示，或者不希望客户端直接处理Base64编码，那么服务器端Base64编码是一个合适的选择。服务器将图片内容读取、编码为Base64字符串，然后通过Jinja2模板传递给前端。

3.1 核心原理

服务器接收文件: FastAPI接收上传的文件。
服务器编码: 使用Python的base64模块将文件内容编码为Base64字符串。
模板传递: 将Base64字符串作为上下文变量传递给Jinja2模板。
Jinja2显示: 在模板中，使用data:image/jpeg;base64,{{ myImage | safe }}格式的src属性来显示图片。| safe过滤器是必要的，以防止Jinja2对Base64字符串中的特殊字符进行转义。

3.2 FastAPI 后端配置 (app.py)

from fastapi import File, UploadFile, Request, FastAPI, HTTPException
from fastapi.templating import Jinja2Templates
import base64
import os # 导入os模块用于文件操作

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(...)):
    """
    接收文件，保存到服务器，然后将文件内容Base64编码后返回给新的Jinja2模板显示。
    """
    contents = None
    try:
        contents = await file.read()
        # 生产环境中，建议将文件保存到独立的存储服务或指定目录，并使用唯一文件名
        # 例如：file_path = f"uploads/{uuid.uuid4()}_{file.filename}"
        # 这里为了简化示例，直接保存到当前目录
        with open(f"uploaded_{file.filename}", "wb") as f:
            f.write(contents)
    except Exception as e:
        raise HTTPException(status_code=500, detail=f'文件上传或保存失败: {e}')
    finally:
        await file.close()

    if contents:
        # 将文件内容Base64编码
        base64_encoded_image = base64.b64encode(contents).decode("utf-8")
        # 返回一个新的Jinja2模板，其中包含Base64编码的图片数据
        return templates.TemplateResponse("display.html", {"request": request, "myImage": base64_encoded_image})
    else:
        raise HTTPException(status_code=500, detail='无法读取文件内容进行编码')

登录后复制

3.3 Jinja2 模板 (templates/index.html 和 templates/display.html)

index.html 用于上传文件：

<!-- 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>

登录后复制

display.html 用于显示Base64编码的图片：

芦笋演示

一键出成片的录屏演示软件，专为制作产品演示、教学课程和使用教程而设计。

查看详情

<!-- 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="上传的图片" width="400" height="400">
   </body>
</html>

登录后复制

4. 方法三：通过FastAPI静态文件服务显示图片

这是最传统且适用于大量图片显示的方法。FastAPI可以配置一个或多个静态文件目录，浏览器可以直接通过URL访问这些目录下的文件。

4.1 核心原理

app.mount("/static", StaticFiles(directory="static"), name="static"): FastAPI配置静态文件服务，将/static URL路径映射到服务器的static目录。
服务器保存文件: 上传的图片被保存到FastAPI静态文件服务所能访问的目录中（例如，static目录或其子目录）。
Jinja2引用: 在Jinja2模板中，使用url_for('static', path='/your_image.png')或直接使用/static/your_image.png来引用图片。

4.2 FastAPI 后端配置 (app.py)

from fastapi import FastAPI, File, UploadFile, Request
from fastapi.responses import HTMLResponse
from fastapi.staticfiles import StaticFiles 
from fastapi.templating import Jinja2Templates
import os
import uuid # 用于生成唯一文件名

app = FastAPI()

# 配置静态文件服务，将 /static URL路径映射到项目根目录下的 "static" 文件夹
# 确保在项目根目录创建一个名为 "static" 的文件夹
app.mount("/static", StaticFiles(directory="static"), name="static")

templates = Jinja2Templates(directory="templates")

@app.get("/")
async def root(request: Request):
    """
    渲染主上传页面。
    """
    return templates.TemplateResponse("index_static.html", {"request": request})

@app.post("/upload-static")
async def upload_file_static(file: UploadFile = File(...)):
    """
    接收上传文件，保存到静态文件目录，并返回图片的URL。
    """
    # 确保静态文件目录存在
    static_dir = "static/uploads"
    os.makedirs(static_dir, exist_ok=True)

    # 生成唯一文件名，防止冲突
    file_extension = os.path.splitext(file.filename)[1]
    unique_filename = f"{uuid.uuid4()}{file_extension}"
    file_path = os.path.join(static_dir, unique_filename)

    try:
        with open(file_path, "wb") as f:
            f.write(await file.read())
    except Exception as e:
        raise HTTPException(status_code=500, detail=f"文件上传失败: {e}")
    finally:
        await file.close()

    # 返回一个包含图片URL的模板
    image_url = f"/static/uploads/{unique_filename}"
    return templates.TemplateResponse("display_static.html", {"request": request, "image_url": image_url})

登录后复制

4.3 Jinja2 模板 (templates/index_static.html 和 templates/display_static.html)

index_static.html 用于上传文件：

<!-- templates/index_static.html -->
<!DOCTYPE html>
<html>
<head>
    <title>上传图片到静态目录</title>
</head>
<body>
    <h1>上传图片</h1>
    <form action="/upload-static" method="post" enctype="multipart/form-data">
        <input type="file" name="file" accept="image/*" />
        <input type="submit" value="上传" />
    </form>
</body>
</html>

登录后复制

display_static.html 用于显示静态文件服务提供的图片：

<!-- templates/display_static.html -->
<!DOCTYPE html>
<html>
<head>
    <title>显示静态图片</title>
</head>
<body>
    <h1>您上传的图片</h1>
    <!-- 直接使用静态文件URL引用图片 -->
    <img src="{{ image_url }}" alt="上传的图片" width="400" height="400">
</body>
</html>

登录后复制

4.4 注意事项

安全风险: 将用户上传的文件直接保存到静态文件目录并公开访问存在潜在安全风险。恶意用户可能上传包含恶意脚本或可执行文件的文件。务必对上传文件进行严格的类型、大小和内容校验。
文件名冲突: 多个用户可能上传同名文件。使用uuid等方法生成唯一文件名是最佳实践。
存储管理: 静态文件目录可能会随着时间累积大量文件，占用磁盘空间。需要考虑定期清理不再需要的旧文件。
并发访问: 如果有大量用户同时上传，文件写入操作可能成为瓶颈。可以考虑将文件上传到云存储服务（如AWS S3, Azure Blob Storage）或使用异步文件写入。
url_for: 在Jinja2模板中，可以使用{{ url_for('static', path='/uploads/your_image.png') }}来生成静态文件的URL，这在FastAPI配置了多个静态目录或需要更灵活的路径管理时非常有用。

5. 总结与最佳实践

在FastAPI和Jinja2中显示上传图片有多种策略，每种都有其适用场景和优缺点：

客户端Base64预览:
- 优点: 即时预览，用户体验好，不增加服务器预览负载。
- 缺点: 仅适用于预览，图片实际上传仍需服务器处理；Base64字符串较大，不适合大量或大尺寸图片通过HTML直接传输。
- 适用场景: 用户希望在提交前看到图片效果，或仅需临时预览。
服务器端Base64编码返回:
- 优点: 服务器可以对图片进行处理（如缩放、水印），然后返回；不需要配置静态文件服务，图片不直接暴露为URL。
- 缺点: 增加了服务器的CPU和内存开销（编码）；Base64字符串传输量大，可能影响页面加载速度。
- 适用场景: 图片需要服务器端处理，或对图片访问有严格权限控制，不希望直接通过URL访问。
通过FastAPI静态文件服务:
- 优点: 传统且高效，适用于大量图片；浏览器可以直接缓存图片。
- 缺点: 需要仔细处理文件命名、存储管理和安全校验，防止恶意文件上传和公开访问。
- 适用场景: 大多数生产环境推荐，特别是当图片需要长期存储和高效访问时。