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

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