fastapi 构建一个html页面模版,页面可以上传一个文件并预览,点击确认或者放弃后返回原来页面,包括htmll模版
时间: 2024-09-13 09:03:43 浏览: 37
王者荣耀官方网站静态页面css+html
5星 · 资源好评率100%
FastAPI 是一个现代、快速(高性能)的 Web 框架,用于构建 API。在 FastAPI 中,你可以使用模板引擎来生成 HTML 页面,这里我们以 Jinja2 为例来创建一个简单的 HTML 模板,该模板包含文件上传功能以及预览和确认或放弃的按钮。
首先,你需要安装 Jinja2,如果你使用的是 FastAPI 的标准库 `starlette`,它已经内置了对 Jinja2 的支持。在你的 `requirements.txt` 文件中添加以下内容(如果你使用的是 `uvicorn` 作为服务器):
```
fastapi
uvicorn[standard]
jinja2
```
然后,你可以创建一个 FastAPI 应用,加载 HTML 模板,并定义路由来处理文件上传和预览。以下是一个简单的示例:
```python
from fastapi import FastAPI, File, UploadFile, Request
from fastapi.templating import Jinja2Templates
import os
app = FastAPI()
templates = Jinja2Templates(directory="templates") # 假设你的 HTML 模板存放在 templates 目录下
@app.get("/")
async def index(request: Request):
return templates.TemplateResponse("upload.html", {"request": request})
@app.post("/upload")
async def upload_file(file: UploadFile = File(...)):
# 这里你可以处理文件,例如保存到服务器上
# 但为了简化,我们只是保存文件的内容到内存
contents = await file.read()
# 实际上这里应该保存文件并返回一个唯一的标识符,用于预览页面中引用
# 这里我们只是简单地返回文件内容以示例
return {"file contents": contents.decode()}
```
接下来是 HTML 模板 `upload.html` 的内容,该模板应该放在名为 `templates` 的目录中:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>File Upload</title>
</head>
<body>
<h1>Upload File</h1>
<form action="/upload" method="post" enctype="multipart/form-data">
<input type="file" name="file">
<input type="submit" value="Upload">
</form>
{% if filecontents %}
<h2>File Preview</h2>
<pre>{{ filecontents }}</pre>
<a href="/">Confirm</a> or <a href="/">Cancel</a>
{% endif %}
</body>
</html>
```
在上面的代码中,我们创建了一个简单的文件上传表单,当用户选择文件并提交后,文件内容会被发送到 `/upload` 路由进行处理。处理函数 `upload_file` 读取文件内容,并返回一个包含文件内容的响应,这些内容在模板中显示为预览。在实际应用中,你可能希望保存文件到服务器,然后将文件名或路径传递给模板以供预览。
阅读全文