如何从Flet-FastAPI服务器向客户端下载文件？

问题根源 #

你当前的代码里，虽然挂载了FletStaticFiles到/files路径，但访问该路径下的文件时会跳转到主页面——这是因为Flet的前端路由会拦截所有请求，优先处理自身页面路由，导致静态文件请求被Flet接管，没正确转发到静态文件服务，即便服务器日志返回200 OK。

可行解决方案 #

方案1：更换静态文件挂载路径 #

避开Flet可能拦截的路径，比如把挂载路径改成/static-files，用FastAPI原生的StaticFiles替代FletStaticFiles：

import flet as ft
import flet_fastapi
from fastapi.staticfiles import StaticFiles

async def main(page: ft.Page):
    page.title = "TestApp"
    await page.add_async(ft.Text("this is test app"))

app = flet_fastapi.app(main, upload_dir="files", secret_key="secret_key")
# 挂载到不与Flet路由冲突的路径
app.mount(path="/static-files", app=StaticFiles(directory="files", html=False))

此时访问http://127.0.0.1:8000/static-files/IMG.jpg，就能直接下载服务器./files/IMG.jpg文件。

方案2：调整挂载顺序优先处理静态文件 #

如果必须用/files路径，把静态文件挂载代码放在Flet app创建之后（FastAPI会优先匹配先挂载的服务）：

import flet as ft
import flet_fastapi
from fastapi.staticfiles import StaticFiles

async def main(page: ft.Page):
    page.title = "TestApp"
    await page.add_async(ft.Text("this is test app"))

app = flet_fastapi.app(main, upload_dir="files", secret_key="secret_key")
# 先挂载静态文件服务，确保请求优先被处理
app.mount(path="/files", app=StaticFiles(directory="files", html=False))

这样/files/IMG.jpg的请求会被StaticFiles直接处理，不会被Flet路由拦截。

方案3：在Flet页面内添加下载按钮 #

如果需要在页面内触发下载，可以添加按钮调用FastAPI的下载接口：

import flet as ft
import flet_fastapi
from fastapi.responses import FileResponse
import os

async def main(page: ft.Page):
    page.title = "TestApp"
    
    async def trigger_download(e):
        await page.launch_url("/download/IMG.jpg")
    
    await page.add_async(ft.ElevatedButton("下载图片", on_click=trigger_download))
    await page.add_async(ft.Text("this is test app"))

app = flet_fastapi.app(main, upload_dir="files", secret_key="secret_key")

# 定义下载接口
@app.get("/download/{filename}")
async def download_file(filename: str):
    file_path = os.path.join("files", filename)
    if os.path.exists(file_path):
        return FileResponse(
            file_path, 
            media_type="application/octet-stream", 
            filename=filename
        )
    return {"error": "文件不存在"}

点击页面按钮即可触发文件下载。

内容的提问来源于stack exchange，提问作者Alexander