图片上传前需用filereader+image读取真实宽高并校验，支持promise.all并行处理多图，超限时用canvas缩放降像素，注意exif方向修正及svg兼容性。
在图片上传组件中限制最大像素尺寸，核心是**读取原始图片的真实宽高，并在上传前做校验**，不能只靠 CSS 显示控制或后端拦截——用户可能上传一张 8000×6000 的图，缩放显示成 200×150，但文件体积和处理压力依然存在。
用 FileReader + Image 获取真实分辨率
HTML 的 input[type="file"] 选中文件后，需借助 FileReader 读取为 data URL，再用 new Image() 加载解析其原始尺寸。这是唯一可靠获取客户端图片像素的方法。
- 监听
change事件，拿到event.target.files - 对每个
File对象，创建FileReader实例，调用readAsDataURL() - 在
reader.onload中，新建Image，设置src = reader.result - 在
image.onload回调里读取image.width和image.height - 判断是否超出预设阈值（如最大宽度 1920、最大高度 1080）
支持批量且避免阻塞的处理方式
用户一次选中多张图时，不能串行等待每张加载完成才校验——会卡顿、体验差。应并行处理，用 Promise.all 统一等待所有尺寸检查结束。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
下载
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 为每张图封装一个返回
Promise的校验函数 - 函数内部 resolve(true) 表示尺寸合规，reject(错误信息) 表示超限
- 调用
Promise.all(fileList.map(checkImageSize))批量校验 - 任一失败就中断上传流程，提示“第 X 张图尺寸超标：12000×8000，最大允许 1920×1080”
结合压缩降像素实现柔性限制
纯拒绝上传体验生硬。更优做法是：检测到超限后，自动用 Canvas 缩放到目标尺寸（如等比缩放至宽度 ≤1920），再生成新 Blob 替换原文件。
- 创建
<canvas></canvas>，计算缩放比例：scale = Math.min(1920 / width, 1080 / height) - 设置 canvas 宽高为
Math.floor(width * scale)和Math.floor(height * scale) - 用
ctx.drawImage(image, 0, 0, canvas.width, canvas.height)绘制 - 调用
canvas.toBlob(callback, 'image/jpeg', 0.8)输出压缩后文件 - 用新 Blob 构造
new File([blob], file.name, {type: 'image/jpeg'})替换原项
注意兼容性与边界情况
某些图片（如带旋转 EXIF 信息的手机照片）直接读取 image.width/height 可能是错的——Canvas 绘制时需先按 orientation 修正。
- 用
exif-js或piexifjs提取 Orientation 值 - 若为 6（顺时针90°），需交换宽高后再缩放，绘制时加旋转变换
- 超大图（如 >5000px）在低端设备上可能触发内存警告，建议加 try/catch 并 fallback 到提示而非崩溃
- SVG 文件无法用
Image正确读取宽高，需单独判断file.type === 'image/svg+xml'并跳过像素校验
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
