当前位置：首页 > news >正文

FastHTML快速入门：单文件上传，多文件上传

news 2024/11/15 12:00:27

文件上传在Web开发中是一个常见的任务。以下示例展示了如何上传文件到托管服务器，并向用户展示上传文件的信息。需要注意的是，文件上传在生产环境中可能存在安全隐患，因此请务必了解相关风险。

单文件上传

以下是一个单文件上传的示例代码：

from fasthtml.common import *
from pathlib import Path
app, rt = fast_app()
upload_dir = Path("filez")
upload_dir.mkdir(exist_ok=True)
@rt('/')
def get():return Titled("文件上传演示",Article(Form(hx_post=upload, hx_target="#result-one")(Input(type="file", name="file"),Button("上传", type="submit", cls='secondary'),),Div(id="result-one")))
def FileMetaDataCard(file):return Article(Header(H3(file.filename)),Ul(Li('大小: ', file.size),            Li('内容类型: ', file.content_type),Li('头部信息: ', file.headers),))    
@rt
async def upload(file: UploadFile):card = FileMetaDataCard(file)filebuffer = await file.read()(upload_dir / file.filename).write_bytes(filebuffer)return card
serve()

第13行：使用Form组件渲染的每个表单默认为enctype="multipart/form-data"。
第14行：不要忘记将Input组件的类型设置为file。
第32行：上传视图应接收一个Starlette UploadFile类型的参数。您可以添加其他表单变量。
第33行：我们可以访问卡片元数据（文件名、大小、内容类型、头部信息），这是一个快速且安全的过程。我们将这些信息设置到卡片变量中。
第34行：为了访问文件中的内容，我们使用await方法来读取()。由于文件可能很大或包含错误数据，这是一个与访问元数据分开的步骤。
第35行：此步骤展示了如何使用Python内置的pathlib.Path库将文件写入磁盘。

多文件上传

以下是一个多文件上传的示例代码：

from fasthtml.common import *
from pathlib import Path
app, rt = fast_app()
upload_dir = Path("filez")
upload_dir.mkdir(exist_ok=True)
@rt('/')
def get():return Titled("多文件上传演示",Article(Form(hx_post=upload_many, hx_target="#result-many")(Input(type="file", name="files", multiple=True),Button("上传", type="submit", cls='secondary'),),Div(id="result-many")))
def FileMetaDataCard(file):return Article(Header(H3(file.filename)),Ul(Li('大小: ', file.size),            Li('内容类型: ', file.content_type),Li('头部信息: ', file.headers),))    
@rt
async def upload_many(files: list[UploadFile]):cards = []for file in files:cards.append(FileMetaDataCard(file))filebuffer = await file.read()(upload_dir / file.filename).write_bytes(filebuffer)return cards
serve()

第13行：使用Form组件渲染的每个表单默认为enctype="multipart/form-data"。
第14行：不要忘记将Input组件的类型设置为file，并将multiple属性设置为True。
第32行：上传视图应接收一个包含Starlette UploadFile类型的list。您可以添加其他表单变量。
第34行：遍历文件。
第35行：我们可以访问卡片元数据（文件名、大小、内容类型、头部信息），这是一个快速且安全的过程。我们将这些信息添加到卡片变量中。
第36行：为了访问文件中的内容，我们使用await方法来读取()。由于文件可能很大或包含错误数据，这是一个与访问元数据分开的步骤。
第37行：此步骤展示了如何使用Python内置的pathlib.Path库将文件写入磁盘。
请注意，文件上传在生产环境中可能存在安全隐患。建议您阅读OWASP文件上传备忘录以了解更多安全知识。