【传奇开心果系列】Flet结合FastAPI 构建的文件上传和下载系统自定义模板特色和实现原理深度解析

一、效果截图

二、应用场景介绍

该应用是一个基于 Flet 和 FastAPI 构建的文件上传和下载系统。主要功能包括：

1. 文件上传：

   • 用户可以选择多个文件进行上传。
   • 上传过程中显示每个文件的进度条。
   • 上传完成后，清空文件列表。

2. 文件下载：

   • 提供一个下载接口，用户可以通过访问特定的 URL 下载指定的文件。

3. 文件清理：

   • 提供一个按钮，点击后会删除 ./assets/uploads 目录下的所有文件。

三、特色说明

1. 用户友好的界面：

   • 使用 Flet 框架构建了一个简洁直观的用户界面，用户可以通过点击按钮选择文件并上传。
   • 上传过程中，每个文件的进度条实时更新，提供良好的用户体验。

2. 多文件支持：

   • 支持一次选择多个文件进行上传，方便用户批量操作。

3. 进度条显示：

   • 在文件上传过程中，每个文件都有一个进度条显示上传进度，用户可以清晰地了解文件上传的状态。

4. 文件下载接口：

   • 使用 FastAPI 提供了一个文件下载接口，用户可以通过访问特定的 URL 下载文件。
   • 示例中提供了下载 1.xlsx 文件的功能。

5. 文件清理功能：

   • 提供一个按钮，点击后会删除 ./assets/uploads 目录下的所有文件，方便用户管理上传的文件。

6. 安全性：

   • 文件上传和下载的路径都进行了明确的配置，避免了路径注入等安全问题。
   • 上传文件的 URL 有时间限制，增加了安全性。

四、概括说明

该应用结合了 Flet 和 FastAPI 的优势，提供了一个简单易用的文件上传和下载系统。用户界面友好，功能实用，适合需要文件管理的小型项目或个人使用。

五、注意：

从代码和运行代码的日志输出来看，FastAPI 和 Flet 应用都已成功启动，并且没有明显的错误。为了确保一切正常运行，我们可以进行以下检查和测试：

1. 检查端口占用情况

确保 8080 和 8550 端口没有被其他应用程序占用。你可以使用以下命令检查端口占用情况：

netstat -ano | findstr :8080
netstat -ano | findstr :8550

2. 测试文件上传功能

1. 运行你的应用程序。
2. 打开 Flet 应用的界面，点击 “Select files…” 按钮选择一个或多个文件。
3. 点击 “Upload” 按钮上传文件。
4. 检查 ./assets/uploads 目录下是否出现了上传的文件。

3. 测试文件下载功能

1. 确保 ./assets/dl 目录下有一个名为 1.xlsx 的文件。
2. 在 Flet 应用的界面中，点击 “Download” 按钮。
3. 检查浏览器是否打开了 http://127.0.0.1:8080/dl/1.xlsx 并开始下载文件。

4. 检查日志输出

确保没有任何错误日志输出。你可以查看终端中的日志，确保没有出现类似以下的错误信息：

• OSError: [Errno 98] Address already in use
• FileNotFoundError: [Errno 2] No such file or directory
• PermissionError: [Errno 13] Permission denied

5. 增加调试日志

如果仍然有疑问，可以在关键位置增加调试日志，以便更好地了解程序的执行情况。例如，在 upload_file 和 dl_file 函数中添加日志：

@app.post("/upload/")
async def upload_file(file: UploadFile = File(...)):
    print(f"Uploading file: {
     
     file.filename}")
    with open(os.path.join("./assets/uploads", file.filename), "wb") as buffer:
        buffer.write(await file.read())
    print(f"File uploaded: {
     
     file.filename}")
    return {
   
   "filename": file.filename}

@app.get("/dl/{filename}")
async def dl_file(filename: str):
    print(