File Upload
文件上传
WebMobileDesktop上手难度: 中等
让用户把文件从设备弄到你的应用里。
Live Demo
真的可以点点击选择或拖拽文件到此处
JPG / PNG · 单张不超过 10MB
你刚才看到的这个：微信聊天里选择图片、相册 App 导入照片、后台的「上传头像」框、网页表单里的虚线拖拽框。
它到底是什么
文件上传真正的难点是「上传中」和「上传失败」这两段。上传成功用户看得见，失败却常常被忽略。一个合格的上传组件必须有：进度、取消、失败重试、格式大小限制提示。
上传file upload上传区拖拽上传upload附件上传
Anatomy · 它由什么组成
Drop Zone拖拽区
虚线框，支持点击和拖放
File List文件列表
缩略图 + 名称 + 大小
Progress上传进度
进度条 + 百分比
Cancel / Retry取消/重试
进行中可取消，失败可重试
Constraint限制说明
格式、大小、数量
When to Use
什么时候该用 / 不该用| 情况 | 推荐 |
|---|---|
| 需要接收图片、文档、媒体文件 | 用 |
| 支持拖拽和点击选择两种方式 | 用 |
| 大文件需要显示进度和可取消 | 用 |
| 只需一张图（头像、封面） | 视情况 |
移动端记得申请相册/文件权限，权限拒绝时要有解释和设置入口。
一定要提前告知格式和大小限制，别让用户传完 5 分钟才被拒。
Similar Patterns
别搞混一句话区分：让用户把文件从设备弄到你的应用里。
怎么告诉 AI
三层 Prompt补上组件名和具体内容
加一个图片上传区：支持点击和拖拽，只接受 jpg/png，单张不超过 10MB，上传时显示缩略图和进度条，可取消和重试。
不要只对 AI 说
Bad → Better不要这样对 AI 说
加个上传按钮可以传文件。
改成这样说
加文件上传区：支持点击和拖拽，accept 限定格式，前端预校验大小，每个文件显示缩略图 + 进度条 + 取消按钮，失败可重试，提前说明格式和大小限制。
分享这张卡
社交平台友好把这个 Pattern 做成 3:4（小红书）或 1:1（X / Reddit）的知识卡片，在浏览器里直接导出 PNG，不需要后端。