尧图网站建设 
简介这是一份面向前端初学者与Web开发者的HTML5多图片上传预览实战源码重点演示如何借助File API与拖放API在不依赖服务器端处理的前提下完成本地图片读取与即时预览适合用于学习HTML5文件操作、DOM动态渲染及事件监听等核心技能。压缩包共18个文件约145KB包含9个png图片素材、5个js脚本、2个url快捷方式、1个css样式表与1个html页面其中js文件承担文件读取、上传控制与核心逻辑css负责预览区域样式html提供页面结构整体目录按control、core、css、images、js等模块划分便于按功能查阅。目前已有1470人学习下载。源码中通过FileReader的readAsDataURL将图片转为Base64数据URL并动态插入img标签同时利用闭包保存每次迭代的文件对象还实现了拖拽文件到预览区触发上传的交互读者可据此掌握多图预览、拖放上传与原生JavaScript事件处理的完整实现思路。1. 多图上传预览为什么你的 FileReader 方案在第六张图就崩了做过后台管理系统的人多半遇到过这个需求用户一次性选十几张商品图选完立刻要在页面上看到缩略图能删能排序最后再统一提交。表面上看input typefile multiple加一个FileReader循环就完事了但真到线上问题全冒出来——选到第六七张图时页面卡死、iOS 上预览图旋转了 90 度、用户选了 20 张 4K 大图直接把内存干到 1.5G 然后标签页崩溃。这个标题讲的就是这件事用 HTML5 原生能力实现多图片上传前的本地预览不依赖任何上传服务端纯前端把「选图 → 读图 → 显示 → 管理」这条链路跑通。它解决的核心诉求是让用户在真正上传之前就能看到自己选了什么、选错了能删、顺序不对能调避免传完才发现传错图的尴尬。适合谁看正在写后台表单的前端、需要给运营做批量图片管理工具的开发者、以及被「预览卡顿」折磨过想搞清楚底层机制的人。下面这套方案我在多个中后台项目里跑过源码结构简单浏览器兼容到 IE10 以上FileReader支持情况核心逻辑不超过 200 行。2. 从 FileList 到 img.src多图预览的完整数据流2.1 为什么不能直接把 File 对象塞进 img.src很多人第一反应是img.src file这行代码不会报错但图片也不会显示。原因在于File对象是一个二进制数据容器它没有 URL 语义浏览器无法通过它定位资源。你需要把File转成一个浏览器能识别的地址有两条路第一条是FileReader.readAsDataURL()把文件读成 base64 字符串直接赋给img.src。优点是兼容性极好IE10 都支持缺点是 base64 体积比原文件大约 33%而且字符串常驻内存选 20 张大图就是灾难。第二条是URL.createObjectURL(file)它返回一个blob:开头的临时地址指向内存中的文件对象。优点是零拷贝、几乎不占额外内存、速度快缺点是必须手动URL.revokeObjectURL()释放否则只要页面不刷新这些 blob 地址就一直占着内存。我一般会这么选预览用createObjectURL需要把图片数据发给后端或做 canvas 处理时才用FileReader。两者不是替代关系是场景分工。2.2 最小可运行版本一次选多张立刻出缩略图先看能跑起来的最小代码HTML 结构极简input typefile idfileInput acceptimage/* multiple div idpreviewBox/div对应的 JavaScriptconst input document.getElementById(fileInput); const box document.getElementById(previewBox); // 用一个数组记录所有 blob 地址方便后续统一释放 const blobUrls []; input.addEventListener(change, (e) { const files Array.from(e.target.files); // FileList 转真数组才能用 forEach files.forEach(file { // 只处理图片类型防止用户绕过 accept 选了别的 if (!file.type.startsWith(image/)) return; const url URL.createObjectURL(file); blobUrls.push(url); const img document.createElement(img); img.src url; img.style.width 120px; img.style.height 120px; img.style.objectFit cover; // 保持比例裁切避免拉伸变形 img.dataset.name file.name; box.appendChild(img); }); }); // 页面卸载时统一释放这是最容易被漏掉的一步 window.addEventListener(beforeunload, () { blobUrls.forEach(url URL.revokeObjectURL(url)); });逻辑说明e.target.files拿到的是一个FileList它是类数组但不是真数组没有forEach所以必须Array.from转换。file.type做二次校验是因为acceptimage/*只是给文件选择器的建议用户手动切到「所有文件」还是能选到 PDF。objectFit: cover是缩略图场景的标配否则不同比例的图会把布局撑得七零八落。参数说明createObjectURL接收File或Blob返回的地址格式是blob:http://域名/uuid这个地址只在当前文档生命周期内有效。revokeObjectURL必须在确认图片不再使用后调用如果你在img.onload里立刻释放某些浏览器会显示裂图稳妥做法是页面级统一释放。2.3 FileReader 版本什么时候必须用它当你需要拿到图片的 base64 数据做后续处理——比如压缩、加水印、转成 FormData 提交——FileReader就绕不开了。下面这个版本把每张图读成 dataURL 并保留文件对象function readAsDataURL(file) { return new Promise((resolve, reject) { const reader new FileReader(); reader.onload () resolve(reader.result); // result 是 data:image/png;base64,xxx reader.onerror () reject(reader.error); reader.readAsDataURL(file); }); } async function handleFiles(files) { for (const file of files) { if (!file.type.startsWith(image/)) continue; const dataUrl await readAsDataURL(file); const img new Image(); img.src dataUrl; box.appendChild(img); } }逻辑说明这里用Promise包一层是因为FileReader是回调式 API直接循环会踩到闭包变量共享的坑。用for...of加await保证顺序读取避免多张大图同时读导致内存峰值叠加。参数说明readAsDataURL没有第二个参数读出来的字符串包含 MIME 前缀。如果你只要纯 base64需要split(,)[1]。reader.error是一个DOMException常见的是NotReadableError通常因为文件被其他程序占用。3. 把预览做成能用的组件删除、排序、数量限制3.1 用 dataTransfer 维护一份可编辑的文件列表原生input.files是只读的用户删掉一张预览图后你没法直接改它。常见做法是自己维护一个File[]数组提交时再用DataTransfer重建FileListlet selectedFiles []; // 唯一数据源 function addFiles(newFiles) { const images Array.from(newFiles).filter(f f.type.startsWith(image/)); selectedFiles selectedFiles.concat(images); render(); } function removeFile(index) { const url selectedFiles[index].__previewUrl; if (url) URL.revokeObjectURL(url); // 删图时立刻释放别等页面卸载 selectedFiles.splice(index, 1); render(); } // 提交前把数组还原成 FileList function buildFormData() { const dt new DataTransfer(); selectedFiles.forEach(f dt.items.add(f)); const fd new FormData(); // dt.files 就是重建出来的 FileList Array.from(dt.files).forEach(f fd.append(images, f)); return fd; }逻辑说明DataTransfer原本是拖拽 API 的一部分但它可以当FileList的构造器用这是很多人不知道的技巧。__previewUrl是我挂在 File 对象上的自定义属性用来记录对应的 blob 地址删除时精准释放避免内存泄漏。参数说明dt.items.add(file)每次只能加一个文件不能传数组。fd.append(images, f)的第二个参数是文件对象后端收到的字段名就是images多个同名字段会组成数组。3.2 数量限制与去重别让用户选 200 张真实场景里必须限制数量否则用户一个 CtrlA 全选页面直接卡死。同时要按文件名加大小去重防止重复选择const MAX_COUNT 9; function addFiles(newFiles) { const images Array.from(newFiles).filter(f f.type.startsWith(image/)); for (const file of images) { if (selectedFiles.length MAX_COUNT) { alert(最多只能上传 ${MAX_COUNT} 张); break; } // 用 文件名大小 做简易指纹去重 const key ${file.name}_${file.size}; const exists selectedFiles.some(f ${f.name}_${f.size} key); if (exists) continue; file.__previewUrl URL.createObjectURL(file); selectedFiles.push(file); } render(); }逻辑说明去重放在数量判断之后是因为重复文件不应该占用名额。file.name file.size的组合在单次选择场景下足够用如果要更严谨可以用lastModified一起做 key。参数说明MAX_COUNT建议根据业务定商品图一般 5 到 9 张头像 1 张。alert只是示意生产环境换成页面内的 toast 提示。3.3 渲染函数与拖拽排序的衔接渲染函数负责把selectedFiles同步到 DOM每次增删都全量重绘逻辑简单不易出错function render() { box.innerHTML ; // 清空后重建避免索引错乱 selectedFiles.forEach((file, index) { const wrap document.createElement(div); wrap.className preview-item; wrap.draggable true; // 开启 HTML5 拖拽 wrap.dataset.index index; const img document.createElement(img); img.src file.__previewUrl; wrap.appendChild(img); const del document.createElement(span); del.textContent ×; del.onclick () removeFile(index); wrap.appendChild(del); box.appendChild(wrap); }); }逻辑说明全量重绘在数量不超过几十张时性能完全够用比做 diff 更新省心得多。draggabletrue让每个预览项可拖拽配合dragstart、dragover、drop三个事件就能实现排序核心是在drop时交换数组元素位置再render()。参数说明dataset.index记录当前索引拖拽事件里通过它定位源和目标。注意innerHTML 会清空所有子节点但不会释放 blob 地址所以释放逻辑必须放在removeFile里不能依赖重绘。4. 避坑与排查多图预览最常见的五个翻车现场4.1 现象选到第六七张图时页面明显卡顿原因用了FileReader.readAsDataURL逐张读取每张 4K 图的 base64 字符串约 5 到 8MB全部常驻内存加上 DOM 里的 img 节点内存迅速攀升。解决预览阶段一律改用URL.createObjectURL只在需要提交或处理时才读 base64。如果必须用 FileReader加一个并发队列同时最多读 2 张。4.2 现象iOS Safari 上预览图方向不对横图变竖图原因手机拍照时 EXIF 里存了旋转信息createObjectURL直接渲染时部分浏览器不自动应用这个方向。解决要么用 CSSimage-orientation: from-image现代浏览器支持要么读 EXIF 后手动旋转 canvas。稳妥做法是预览时统一按from-image处理后端再做一次方向校正。4.3 现象删除图片后内存不降反复操作后标签页崩溃原因只从数组和 DOM 里移除了文件没有调用URL.revokeObjectURLblob 地址一直占着内存。解决把 blob 地址挂在 File 对象上删除时同步释放。页面beforeunload时兜底释放剩余全部地址。4.4 现象提交到后端时文件数量对不上少了或多了原因直接用了input.files提交但用户删除操作只改了预览数组没同步input两边数据源不一致。解决始终以自己维护的selectedFiles数组为唯一数据源提交时用DataTransfer重建FileList不要相信input.files。4.5 现象用户选了非图片文件预览区出现裂图原因acceptimage/*只是选择器过滤用户切到「所有文件」仍能选到任意类型。解决在change事件里用file.type.startsWith(image/)做二次校验非图片直接跳过并给出提示。5. 进阶技巧用 canvas 做前端压缩把 20MB 压到 500KB预览跑通之后真正影响上传体验的是文件体积。用户手机拍的原图动辄 5 到 10MB9 张就是 90MB弱网下上传能等到天荒地老。前端压缩是必做的一步核心思路是把图片画到 canvas 上按最大边长等比缩放再导出成 JPEG。function compressImage(file, maxSize 1600, quality 0.8) { return new Promise((resolve) { const img new Image(); const url URL.createObjectURL(file); img.onload () { URL.revokeObjectURL(url); // 图片已加载地址可以释放了 let { width, height } img; // 等比缩放长边压到 maxSize 以内 if (width maxSize || height maxSize) { const ratio Math.min(maxSize / width, maxSize / height); width Math.round(width * ratio); height Math.round(height * ratio); } const canvas document.createElement(canvas); canvas.width width; canvas.height height; const ctx canvas.getContext(2d); ctx.drawImage(img, 0, 0, width, height); // toBlob 比 toDataURL 省内存直接产出二进制 canvas.toBlob((blob) { // 用压缩后的 blob 重建 File保留原文件名 const compressed new File([blob], file.name, { type: image/jpeg }); resolve(compressed); }, image/jpeg, quality); }; img.src url; }); }逻辑说明img.onload里立刻释放 blob 地址因为此时图片数据已经进入 canvas不再需要原始地址。Math.min保证长边缩放到目标尺寸短边等比跟随不会变形。toBlob是异步的比toDataURL少一次 base64 编码内存占用低得多。参数说明maxSize控制长边像素商品图 1600 够用头像 400 即可。quality是 JPEG 压缩质量0.8 是肉眼几乎无损的甜点值压到 0.6 以下会出现明显块状噪点。注意toBlob的第三个参数只对image/jpeg和image/webp生效PNG 会忽略它。几个实测数据供参考一张 4032×3024 的 iPhone 原图约 4.2MB压到长边 1600、质量 0.8 后约 380KB压缩比超过 10 倍肉眼看缩略图几乎无差别。9 张图从 38MB 降到 3.4MB上传时间从几十秒缩到两三秒。一个容易忽略的点压缩是 CPU 密集操作9 张图串行压缩在主线程上会阻塞 UI 约 1 到 2 秒。如果对流畅度要求高可以把压缩逻辑放进 Web Worker主线程只负责渲染预览。我一般会在压缩时给每张图加一个 loading 遮罩压完再替换成最终缩略图用户感知上会顺畅很多。最后说个我踩过的坑早期版本我在img.onload里直接revokeObjectURL结果在部分安卓机上偶发裂图原因是浏览器还没真正完成像素解码。后来改成在canvas.drawImage之后再释放问题消失。这类时序问题没有文档明说只能靠多机型实测攒经验。希望帮到你。本文还有配套的精品资源点击获取 HTML5多图上传预览：从FileReader到createObjectURL的完整实现与避坑指南
简介这是一份面向前端初学者与Web开发者的HTML5多图片上传预览实战源码重点演示如何借助File API与拖放API在不依赖服务器端处理的前提下完成本地图片读取与即时预览适合用于学习HTML5文件操作、DOM动态渲染及事件监听等核心技能。压缩包共18个文件约145KB包含9个png图片素材、5个js脚本、2个url快捷方式、1个css样式表与1个html页面其中js文件承担文件读取、上传控制与核心逻辑css负责预览区域样式html提供页面结构整体目录按control、core、css、images、js等模块划分便于按功能查阅。目前已有1470人学习下载。源码中通过FileReader的readAsDataURL将图片转为Base64数据URL并动态插入img标签同时利用闭包保存每次迭代的文件对象还实现了拖拽文件到预览区触发上传的交互读者可据此掌握多图预览、拖放上传与原生JavaScript事件处理的完整实现思路。1. 多图上传预览为什么你的 FileReader 方案在第六张图就崩了做过后台管理系统的人多半遇到过这个需求用户一次性选十几张商品图选完立刻要在页面上看到缩略图能删能排序最后再统一提交。表面上看input typefile multiple加一个FileReader循环就完事了但真到线上问题全冒出来——选到第六七张图时页面卡死、iOS 上预览图旋转了 90 度、用户选了 20 张 4K 大图直接把内存干到 1.5G 然后标签页崩溃。这个标题讲的就是这件事用 HTML5 原生能力实现多图片上传前的本地预览不依赖任何上传服务端纯前端把「选图 → 读图 → 显示 → 管理」这条链路跑通。它解决的核心诉求是让用户在真正上传之前就能看到自己选了什么、选错了能删、顺序不对能调避免传完才发现传错图的尴尬。适合谁看正在写后台表单的前端、需要给运营做批量图片管理工具的开发者、以及被「预览卡顿」折磨过想搞清楚底层机制的人。下面这套方案我在多个中后台项目里跑过源码结构简单浏览器兼容到 IE10 以上FileReader支持情况核心逻辑不超过 200 行。2. 从 FileList 到 img.src多图预览的完整数据流2.1 为什么不能直接把 File 对象塞进 img.src很多人第一反应是img.src file这行代码不会报错但图片也不会显示。原因在于File对象是一个二进制数据容器它没有 URL 语义浏览器无法通过它定位资源。你需要把File转成一个浏览器能识别的地址有两条路第一条是FileReader.readAsDataURL()把文件读成 base64 字符串直接赋给img.src。优点是兼容性极好IE10 都支持缺点是 base64 体积比原文件大约 33%而且字符串常驻内存选 20 张大图就是灾难。第二条是URL.createObjectURL(file)它返回一个blob:开头的临时地址指向内存中的文件对象。优点是零拷贝、几乎不占额外内存、速度快缺点是必须手动URL.revokeObjectURL()释放否则只要页面不刷新这些 blob 地址就一直占着内存。我一般会这么选预览用createObjectURL需要把图片数据发给后端或做 canvas 处理时才用FileReader。两者不是替代关系是场景分工。2.2 最小可运行版本一次选多张立刻出缩略图先看能跑起来的最小代码HTML 结构极简input typefile idfileInput acceptimage/* multiple div idpreviewBox/div对应的 JavaScriptconst input document.getElementById(fileInput); const box document.getElementById(previewBox); // 用一个数组记录所有 blob 地址方便后续统一释放 const blobUrls []; input.addEventListener(change, (e) { const files Array.from(e.target.files); // FileList 转真数组才能用 forEach files.forEach(file { // 只处理图片类型防止用户绕过 accept 选了别的 if (!file.type.startsWith(image/)) return; const url URL.createObjectURL(file); blobUrls.push(url); const img document.createElement(img); img.src url; img.style.width 120px; img.style.height 120px; img.style.objectFit cover; // 保持比例裁切避免拉伸变形 img.dataset.name file.name; box.appendChild(img); }); }); // 页面卸载时统一释放这是最容易被漏掉的一步 window.addEventListener(beforeunload, () { blobUrls.forEach(url URL.revokeObjectURL(url)); });逻辑说明e.target.files拿到的是一个FileList它是类数组但不是真数组没有forEach所以必须Array.from转换。file.type做二次校验是因为acceptimage/*只是给文件选择器的建议用户手动切到「所有文件」还是能选到 PDF。objectFit: cover是缩略图场景的标配否则不同比例的图会把布局撑得七零八落。参数说明createObjectURL接收File或Blob返回的地址格式是blob:http://域名/uuid这个地址只在当前文档生命周期内有效。revokeObjectURL必须在确认图片不再使用后调用如果你在img.onload里立刻释放某些浏览器会显示裂图稳妥做法是页面级统一释放。2.3 FileReader 版本什么时候必须用它当你需要拿到图片的 base64 数据做后续处理——比如压缩、加水印、转成 FormData 提交——FileReader就绕不开了。下面这个版本把每张图读成 dataURL 并保留文件对象function readAsDataURL(file) { return new Promise((resolve, reject) { const reader new FileReader(); reader.onload () resolve(reader.result); // result 是 data:image/png;base64,xxx reader.onerror () reject(reader.error); reader.readAsDataURL(file); }); } async function handleFiles(files) { for (const file of files) { if (!file.type.startsWith(image/)) continue; const dataUrl await readAsDataURL(file); const img new Image(); img.src dataUrl; box.appendChild(img); } }逻辑说明这里用Promise包一层是因为FileReader是回调式 API直接循环会踩到闭包变量共享的坑。用for...of加await保证顺序读取避免多张大图同时读导致内存峰值叠加。参数说明readAsDataURL没有第二个参数读出来的字符串包含 MIME 前缀。如果你只要纯 base64需要split(,)[1]。reader.error是一个DOMException常见的是NotReadableError通常因为文件被其他程序占用。3. 把预览做成能用的组件删除、排序、数量限制3.1 用 dataTransfer 维护一份可编辑的文件列表原生input.files是只读的用户删掉一张预览图后你没法直接改它。常见做法是自己维护一个File[]数组提交时再用DataTransfer重建FileListlet selectedFiles []; // 唯一数据源 function addFiles(newFiles) { const images Array.from(newFiles).filter(f f.type.startsWith(image/)); selectedFiles selectedFiles.concat(images); render(); } function removeFile(index) { const url selectedFiles[index].__previewUrl; if (url) URL.revokeObjectURL(url); // 删图时立刻释放别等页面卸载 selectedFiles.splice(index, 1); render(); } // 提交前把数组还原成 FileList function buildFormData() { const dt new DataTransfer(); selectedFiles.forEach(f dt.items.add(f)); const fd new FormData(); // dt.files 就是重建出来的 FileList Array.from(dt.files).forEach(f fd.append(images, f)); return fd; }逻辑说明DataTransfer原本是拖拽 API 的一部分但它可以当FileList的构造器用这是很多人不知道的技巧。__previewUrl是我挂在 File 对象上的自定义属性用来记录对应的 blob 地址删除时精准释放避免内存泄漏。参数说明dt.items.add(file)每次只能加一个文件不能传数组。fd.append(images, f)的第二个参数是文件对象后端收到的字段名就是images多个同名字段会组成数组。3.2 数量限制与去重别让用户选 200 张真实场景里必须限制数量否则用户一个 CtrlA 全选页面直接卡死。同时要按文件名加大小去重防止重复选择const MAX_COUNT 9; function addFiles(newFiles) { const images Array.from(newFiles).filter(f f.type.startsWith(image/)); for (const file of images) { if (selectedFiles.length MAX_COUNT) { alert(最多只能上传 ${MAX_COUNT} 张); break; } // 用 文件名大小 做简易指纹去重 const key ${file.name}_${file.size}; const exists selectedFiles.some(f ${f.name}_${f.size} key); if (exists) continue; file.__previewUrl URL.createObjectURL(file); selectedFiles.push(file); } render(); }逻辑说明去重放在数量判断之后是因为重复文件不应该占用名额。file.name file.size的组合在单次选择场景下足够用如果要更严谨可以用lastModified一起做 key。参数说明MAX_COUNT建议根据业务定商品图一般 5 到 9 张头像 1 张。alert只是示意生产环境换成页面内的 toast 提示。3.3 渲染函数与拖拽排序的衔接渲染函数负责把selectedFiles同步到 DOM每次增删都全量重绘逻辑简单不易出错function render() { box.innerHTML ; // 清空后重建避免索引错乱 selectedFiles.forEach((file, index) { const wrap document.createElement(div); wrap.className preview-item; wrap.draggable true; // 开启 HTML5 拖拽 wrap.dataset.index index; const img document.createElement(img); img.src file.__previewUrl; wrap.appendChild(img); const del document.createElement(span); del.textContent ×; del.onclick () removeFile(index); wrap.appendChild(del); box.appendChild(wrap); }); }逻辑说明全量重绘在数量不超过几十张时性能完全够用比做 diff 更新省心得多。draggabletrue让每个预览项可拖拽配合dragstart、dragover、drop三个事件就能实现排序核心是在drop时交换数组元素位置再render()。参数说明dataset.index记录当前索引拖拽事件里通过它定位源和目标。注意innerHTML 会清空所有子节点但不会释放 blob 地址所以释放逻辑必须放在removeFile里不能依赖重绘。4. 避坑与排查多图预览最常见的五个翻车现场4.1 现象选到第六七张图时页面明显卡顿原因用了FileReader.readAsDataURL逐张读取每张 4K 图的 base64 字符串约 5 到 8MB全部常驻内存加上 DOM 里的 img 节点内存迅速攀升。解决预览阶段一律改用URL.createObjectURL只在需要提交或处理时才读 base64。如果必须用 FileReader加一个并发队列同时最多读 2 张。4.2 现象iOS Safari 上预览图方向不对横图变竖图原因手机拍照时 EXIF 里存了旋转信息createObjectURL直接渲染时部分浏览器不自动应用这个方向。解决要么用 CSSimage-orientation: from-image现代浏览器支持要么读 EXIF 后手动旋转 canvas。稳妥做法是预览时统一按from-image处理后端再做一次方向校正。4.3 现象删除图片后内存不降反复操作后标签页崩溃原因只从数组和 DOM 里移除了文件没有调用URL.revokeObjectURLblob 地址一直占着内存。解决把 blob 地址挂在 File 对象上删除时同步释放。页面beforeunload时兜底释放剩余全部地址。4.4 现象提交到后端时文件数量对不上少了或多了原因直接用了input.files提交但用户删除操作只改了预览数组没同步input两边数据源不一致。解决始终以自己维护的selectedFiles数组为唯一数据源提交时用DataTransfer重建FileList不要相信input.files。4.5 现象用户选了非图片文件预览区出现裂图原因acceptimage/*只是选择器过滤用户切到「所有文件」仍能选到任意类型。解决在change事件里用file.type.startsWith(image/)做二次校验非图片直接跳过并给出提示。5. 进阶技巧用 canvas 做前端压缩把 20MB 压到 500KB预览跑通之后真正影响上传体验的是文件体积。用户手机拍的原图动辄 5 到 10MB9 张就是 90MB弱网下上传能等到天荒地老。前端压缩是必做的一步核心思路是把图片画到 canvas 上按最大边长等比缩放再导出成 JPEG。function compressImage(file, maxSize 1600, quality 0.8) { return new Promise((resolve) { const img new Image(); const url URL.createObjectURL(file); img.onload () { URL.revokeObjectURL(url); // 图片已加载地址可以释放了 let { width, height } img; // 等比缩放长边压到 maxSize 以内 if (width maxSize || height maxSize) { const ratio Math.min(maxSize / width, maxSize / height); width Math.round(width * ratio); height Math.round(height * ratio); } const canvas document.createElement(canvas); canvas.width width; canvas.height height; const ctx canvas.getContext(2d); ctx.drawImage(img, 0, 0, width, height); // toBlob 比 toDataURL 省内存直接产出二进制 canvas.toBlob((blob) { // 用压缩后的 blob 重建 File保留原文件名 const compressed new File([blob], file.name, { type: image/jpeg }); resolve(compressed); }, image/jpeg, quality); }; img.src url; }); }逻辑说明img.onload里立刻释放 blob 地址因为此时图片数据已经进入 canvas不再需要原始地址。Math.min保证长边缩放到目标尺寸短边等比跟随不会变形。toBlob是异步的比toDataURL少一次 base64 编码内存占用低得多。参数说明maxSize控制长边像素商品图 1600 够用头像 400 即可。quality是 JPEG 压缩质量0.8 是肉眼几乎无损的甜点值压到 0.6 以下会出现明显块状噪点。注意toBlob的第三个参数只对image/jpeg和image/webp生效PNG 会忽略它。几个实测数据供参考一张 4032×3024 的 iPhone 原图约 4.2MB压到长边 1600、质量 0.8 后约 380KB压缩比超过 10 倍肉眼看缩略图几乎无差别。9 张图从 38MB 降到 3.4MB上传时间从几十秒缩到两三秒。一个容易忽略的点压缩是 CPU 密集操作9 张图串行压缩在主线程上会阻塞 UI 约 1 到 2 秒。如果对流畅度要求高可以把压缩逻辑放进 Web Worker主线程只负责渲染预览。我一般会在压缩时给每张图加一个 loading 遮罩压完再替换成最终缩略图用户感知上会顺畅很多。最后说个我踩过的坑早期版本我在img.onload里直接revokeObjectURL结果在部分安卓机上偶发裂图原因是浏览器还没真正完成像素解码。后来改成在canvas.drawImage之后再释放问题消失。这类时序问题没有文档明说只能靠多机型实测攒经验。希望帮到你。本文还有配套的精品资源点击获取