我让 AI 封装了一个 ImageUpload 组件，它设计的 5 层校验链路比我想的周全
需求是"各种场景都要上传图片，但每次限制都不一样——有的要精确尺寸、有的要最小尺寸、有的要比例、有的要限格式限大小"。
我让 AI 设计这个组件的整体架构，它给出的"5 层校验管道"比我最初的方案好很多。我原本只想到 3 层。
需求场景
场景 A（分类标签图）：精确 150×90，≤50KB，仅 png 场景 B（分类顶部图）：精确 789×96，≤100KB，jpg/png/gif 场景 C（商品主图）：最小 750×750，≤2MB 场景 D（Banner）：比例 16:9，≤500KB 场景 E（头像）：任意尺寸，≤1MB一个组件要覆盖所有场景，Props 设计是关键。
AI 设计的 5 层校验管道
我把需求描述给 AI 后，它提出了管道式校验架构：
beforeUpload 执行顺序： ┌─────────────────────────────────────────┐ │ Layer0:customBeforeUpload（用户自定义） │ ← 最高优先级 ├─────────────────────────────────────────┤ │ Layer1:validateType（格式校验） │ ← accept:['jpg','png']├─────────────────────────────────────────┤ │ Layer2:validateSize（体积校验） │ ← maxSize+sizeUnit ├─────────────────────────────────────────┤ │ Layer3:validateExactSize（精确尺寸） │ ← limitRect:{w,h}├─────────────────────────────────────────┤ │ Layer4:validateMinSize（最小尺寸） │ ← assertSize:{width,height}├─────────────────────────────────────────┤ │ Layer5:validateRatio（比例校验） │ ← ratioLimit:{widthRatio,heightRatio}└─────────────────────────────────────────┘ │ ↓ 全部通过 开始上传每一层独立、可选、互不干扰。不需要的校验层直接跳过（对应 prop 不传就行）。
我原本的方案 vs AI 的方案
我的方案（3 层）： ├── 格式校验 ├── 大小校验 └── 尺寸校验（一个函数里判断精确/最小/比例） └── 问题：逻辑耦合，后续加新校验类型要改这个函数 AI 的方案（5 层）： ├── 每种校验独立函数 ├── customBeforeUpload 作为逃生舱 ├── 任意一层 return false 就中断 └── 优势：新增校验类型只需加一个函数，不改现有逻辑AI 的方案更符合开放封闭原则——对扩展开放，对修改关闭。
核心实现
constbeforeUpload=async(file:File):Promise<any>=>{// Layer 0: 自定义钩子if(customBeforeUpload){constresult=awaitcustomBeforeUpload(file)if(result===false)returnUpload.LIST_IGNORE}// Layer 1: 格式if(!validateType(file))returnUpload.LIST_IGNORE// Layer 2: 体积if(!validateSize(file))returnUpload.LIST_IGNORE// Layer 3: 精确尺寸if(!(awaitvalidateExactSize(file)))returnUpload.LIST_IGNORE// Layer 4: 最小尺寸if(!(awaitvalidateMinSize(file)))returnUpload.LIST_IGNORE// Layer 5: 比例if(!(awaitvalidateRatio(file)))returnUpload.LIST_IGNOREreturnfile}注意 Layer 3-5 是async的——因为需要加载图片获取实际尺寸：
constvalidateExactSize=async(file:File):Promise<boolean>=>{if(!limitRect)returntrue// 不传 prop 则跳过此层constobjectURL=URL.createObjectURL(file)try{constimg=awaitloadImage(objectURL)if(img.naturalWidth!==limitRect.w){message.error(`图片宽度必须为${limitRect.w}，当前为${img.naturalWidth}`)returnfalse}if(img.naturalHeight!==limitRect.h){message.error(`图片高度必须为${limitRect.h}，当前为${img.naturalHeight}`)returnfalse}returntrue}finally{URL.revokeObjectURL(objectURL)// 防止内存泄漏}}使用时的简洁度
5 层校验，使用者只需要传对应的 prop：
// 精确尺寸 + 体积限制 <ImageUpload limitRect={{w: 150, h: 90}} maxSize={50} sizeUnit="KB" /> // 最小尺寸 <ImageUpload assertSize={{width: 750, height: 750}} /> // 比例限制 <ImageUpload ratioLimit={{widthRatio: 16, heightRatio: 9}} maxSize={500} sizeUnit="KB" /> // 无校验（只限制数量） <ImageUpload maxCount={3} />AI 帮我发现的细节
在实现过程中，AI 还主动提出了几个我没想到的点：
- ObjectURL 必须手动释放——否则每次校验都会内存泄漏
- 视频和图片要分开处理——视频尺寸要用
<video>元素获取，不能用<img> - fuzzy 模式——有时设计稿标注是"约 750px"，需要容忍 ±2px 误差
- 多选时数量校验要提前——在校验尺寸之前就判断数量，避免无意义的图片加载
这些边界情况我如果自己写，大概率第一版会漏，线上出 bug 才补。
和 Form 的集成
maxCount=1时，组件自动适配 Form.Item：
value 接收：string（单张 URL） onChange 返回：string | undefined不需要getValueFromEvent/getValueProps转换。这个设计让使用侧代码简洁了很多：
<Form.Item name="labelImage" label="分类标签图"> <ImageUpload maxCount={1} limitRect={{w: 150, h: 90}} maxSize={50} sizeUnit="KB" /> </Form.Item>零 adapter 代码。
💬 你们项目的图片上传是怎么处理校验的？有统一的组件还是每个页面各写各的？
🔗完整 Skills 源码已开源：github.com/sleepyccat/ai-native-workflow，欢迎 Star ⭐ 和 PR。