用对象 URL 玩转图片预览：前端开发者的“照相馆”秘籍

前言

假如你是一名前端开发者，某天老板拍着桌子开口：“我想在上传图片时直接看到预览，最好像朋友圈发自拍那样带感。”

你嘴上答应，心里默念：“你当我写的是修图 APP？”

别慌，这种需求根本难不倒你。只需搬出浏览器原生神器 URL.createObjectURL()，现场生成本地图片地址，直接显示在页面上，不占网速不求后台，连云服务器都感动到快哭出码流。

简介

对象 URL 就像浏览器临时开的快闪“照相馆”，一出手便能把用户选中的图片 Blob 文件摇身一变，变成可直接塞进 <img> 标签的本地 URL。

• 快速：文件无需上传也能预览。
• 安全：URL 仅存在于本地内存。
• 自动：图片加载完还能注销释放内存空间。

不仅能玩图片预览，音视频播放、PDF 展示、甚至 Excel 文件走马灯，也统统安排，只要你敢在前端整活，浏览器就敢给你撑腰。

示例代码

HTML 部分

偷偷藏起 <input>，再用 <a> 标签代替它，毕竟原生样式太“村”。

JS 部分