FastAPI怎么返回文件流和图片流给前端

阿芳大大_3291

阿芳大大_3291

2026-10-12

427人浏览

原创

streamingresponse可流式返回本地图片,避免fileresponse内存占用高问题;需用生成器分块yield二进制数据,设置正确media_type(如"image/jpeg"),路径须安全可靠。

fastapi怎么返回文件流和图片流给前端

用 StreamingResponse 返回本地图片流

FastAPI 本身不自动提供静态图片服务,如果只是想让前端通过 <img src="/path/to.jpg"> 直接加载一张已存的本地图片,最轻量的方式是用 StreamingResponse 流式读取文件并返回二进制内容。

关键点在于:不能用 FileResponse 简单返回(它适合小文件但会一次性加载进内存),而要用生成器配合 StreamingResponse 实现边读边发,尤其对大图更安全。

  • media_type 必须设为正确的 MIME 类型,比如 "image/jpeg" 或 "image/png",否则浏览器可能拒绝渲染
  • 路径必须是服务端可读的绝对路径或相对于工作目录的可靠路径,别用用户传入的原始文件名拼接,防止路径遍历
  • 生成器函数里要用 open(..., "rb"),且必须用 yield from 或分块 yield,不能一次性 read() 后返回整个 bytes
from fastapi import FastAPI
from fastapi.responses import StreamingResponse

app = FastAPI()

def stream_image():
    with open("./static/photo.jpg", "rb") as f:
        yield from f

@app.get("/photo")
def get_photo():
    return StreamingResponse(stream_image(), media_type="image/jpeg")

上传后实时返回处理中的图片流(如缩略图生成)

如果你在接收上传的图片后,需要即时做裁剪、加水印、转格式等操作,并把结果“边生成边推”给前端(比如进度条 + 预览),就不能等全部处理完再返回——得用流式响应配合异步处理逻辑。

前端设计优化skill
前端设计优化skill

前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度,帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度,帮助开发者将普通页面升级为高品质产品级界面。

下载

注意:这和“上传即存盘再返回 URL”的做法完全不同,适用于低延迟预览场景,但要求处理逻辑本身支持增量输出(例如 Pillow 的 save(..., progressive=True) 不行,得自己分块编码)。

  • 常见误区是试图在 StreamingResponse 里调用同步图像库(如 PIL)的完整 save(),结果还是阻塞+全量返回
  • 真正流式生成图片需底层支持,比如用 OpenCV 写帧到内存 buffer,或用 io.BytesIO 分段写入 JPEG SOF/SOS 数据(极少见,通常不值得)
  • 更实际的做法:用后台任务(BackgroundTasks)保存处理结果,然后返回一个临时 /preview?id=xxx 路由,该路由再用 StreamingResponse 读取刚写好的临时文件

前端如何正确消费图片流?

浏览器原生不支持直接用 fetch 接收图片流并动态赋值给 <img> 的 src。你看到的“流式图片”基本都是假的——要么是 Base64 即时预览(没走服务器),要么是轮询一个不断更新的 URL,要么是用 <img> 指向一个固定路径,靠服务器缓存失效或 Nginx 的 proxy_cache_bypass 控制刷新。

  • 若坚持用流,唯一可行路径是 fetch + response.body.getReader() + Uint8Array 拼接,最后用 URL.createObjectURL(new Blob([bytes], {type: "image/jpeg"})) 赋给 img.src;但这是全量接收后的“伪流”,无进度、无中断恢复
  • 移动端 Safari 对 createObjectURL 有内存限制,大图容易崩溃
  • 真正需要流式体验的场景(如监控画面),应改用 video 标签 + HLS 或 WebRTC,而不是硬套图片流

为什么不用 FileResponse?

FileResponse 看似更简单,但它内部会读取整个文件到内存再发出去,对 >10MB 的图片极易触发 OOM 或拖慢 uvicorn worker。而 StreamingResponse 只维持一个文件句柄和小缓冲区,内存占用恒定。

  • FileResponse 适合已知小文件、且你信任文件路径安全的场景(比如 /favicon.ico)
  • StreamingResponse 是唯一能控制读取节奏、支持超时中断、与 BackgroundTasks 配合做“上传-处理-流式返回”管道的方案
  • 别忽略 headers={"Accept-Ranges": "bytes"} —— 加上它,前端视频控件或图片查看器才可能支持拖动进度条(对 MP4/WEBM 有效,对 JPG/PNG 无效)
复杂点在于:图片本身不是天然可流式的格式,所谓“图片流”大多是语义层面的妥协。真要低延迟、可中断、带进度,得换协议(如 MJPEG over HTTP,或 WebTransport),而不是在 HTTP+JPEG 上强行做流。

大量免费API接口:立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游,为数据API应用能力赋能!

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

前端 fastapi

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
python是前端还是后端
python是前端还是后端

Python属于前端也属于后端,其灵活性和丰富的生态系统使得开发人员能够在不同的领域中灵活运用。本专题为大家提供python相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.11

2403

5

前端如何实现即时通讯
前端如何实现即时通讯

实现即时通讯的方法有WebSocket、Long Polling、Server-Sent Events、WebRTC等等。详细介绍:1、WebSocket,它可以在客户端和服务器之间建立持久连接,实现实时的双向通信,前端可以使用 WebSocket API来创建WebSocket连接,并通过发送和接收消息来实现即时通讯;2、Long Polling,是一种模拟实时通信的技术等等。

2023.10.09

5203

6

前端和后端的区别
前端和后端的区别

前端关注的是用户界面的设计和交互,而后端则注重数据处理和逻辑控制。想了解更多前端后端的相关内容,可以阅读本专题下面的文章。

2024.03.19

6270

13

php和前端的关联介绍
php和前端的关联介绍

php既可以作为前端语言,也可以作为后端语言。想了解更多php和前端的相关内容,可以阅读本专题下面的文章。

2024.03.22

5818

10

前端外包工作内容有哪些
前端外包工作内容有哪些

前端外包工作内容包括:1. 网站和应用程序开发;2. 用户界面和交互设计;3. 用户体验优化;4. 设计和视觉开发;5. 跨浏览器兼容性;6. 性能优化;7. 维护和更新;8. 项目管理和沟通。想了解更多前端的相关内容,可以阅读本专题下面的文章。

2024.05.22

823

5

python打包成可执行文件
python打包成可执行文件

本专题为大家带来python打包成可执行文件相关的文章,大家可以免费的下载体验。

2023.07.20

1711

4

python能做什么
python能做什么

python能做的有:可用于开发基于控制台的应用程序、多媒体部分开发、用于开发基于Web的应用程序、使用python处理数据、系统编程等等。本专题为大家提供python相关的各种文章、以及下载和课程。

2023.07.25

4344

7

format在python中的用法
format在python中的用法

Python中的format是一种字符串格式化方法,用于将变量或值插入到字符串中的占位符位置。通过format方法,我们可以动态地构建字符串,使其包含不同值。php中文网给大家带来了相关的教程以及文章,欢迎大家前来阅读学习。

2023.07.31

1689

3

python教程
python教程

Python已成为一门网红语言,即使是在非编程开发者当中,也掀起了一股学习的热潮。本专题为大家带来python教程的相关文章,大家可以免费体验学习。

2023.08.03

25337

23

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程