如何用 Fetch 配合 URL.createObjectURL 预览上传的图片

news2026/5/8 3:01:26

可以直接用 URL.createObjectURL(file) 实现本地图片预览无需 fetch若需服务端处理如加水印则用 fetch 上传后调用 response.blob() 再 createObjectURL并及时 revoke 释放内存。可以直接用 fetch 获取上传的图片文件比如通过 input typefile再用 URL.createObjectURL 生成临时 URL赋值给 img 的 src 实现预览。关键在于不是用 fetch 去请求远程地址而是把本地 File 对象当作 fetch 的响应体来“模拟”一个可读流从而兼容后续处理逻辑——但更简单直接的做法其实是跳过 fetch直接用 createObjectURL。不过若你确实需要在预览前对图片做 fetch 风格的处理例如加水印接口返回新图、或走代理服务下面分两种常见场景说明场景一纯前端本地预览推荐无需 fetch用户选中图片后不发请求直接生成预览 URL监听 input[typefile] 的 change 事件取到 files[0]即 File 对象它继承自 Blob 调用 URL.createObjectURL(file) 得到一个以 blob: 开头的临时地址把这个地址赋给 img src... 即可立即显示? 优点零网络请求、秒出、无跨域问题、内存自动管理记得用 URL.revokeObjectURL 清理。场景二上传后服务端处理再预览需 fetch比如用户上传图片 → 后端加水印/压缩 → 返回处理后的图片流 → 前端预览唱鸭音乐创作全流程的AI自动作曲工具集 AI 辅助作词、AI 自动作曲、编曲、混音于一体

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2593481.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！