上传

Upload

UI 组件也叫：文件上传、图片上传、拖拽上传、Uploader

一句话：让用户从电脑或手机里选择文件、图片并传到服务器的控件，可以点按钮选择，也可以把文件拖进来。

详细解释

上传组件最常见三种样子：一个「上传文件」按钮，点了打开系统的文件选择窗口；一块虚线边框的 拖拽区域，写着「点击或将文件拖到此处上传」；一排方形的 图片墙，每格显示缩略图，最后一格是「+」。选完文件后，下方会列出文件名、进度条、成功或失败状态，以及删除、重新上传按钮。

写需求时要讲清限制：允许的文件类型（比如只要 jpg、png）、单个文件大小上限、最多几个文件。这些要在选择前就用灰色小字提示，而不是上传失败了才告诉用户。上传头像这类场景还常在选图后弹出裁剪框。大文件要显示真实进度，并允许取消。

灰度线框示意，只表达结构，不代表具体视觉风格。

可以直接贴给 Cursor、Claude Code 等工具，把里面的业务内容换成你自己的。

「附件」用拖拽上传区域：虚线边框的方框，中间是上传图标和「点击或将文件拖到此处」，下方灰色小字「支持 PDF、Word，单个不超过 10MB，最多 5 个」。文件拖入时边框加深，上传后在下方列出文件名、进度条和删除按钮，失败的显示重试。

由触发选择的按钮或拖拽区域、限制说明文字和已上传文件列表组成，列表每项含文件名、进度和操作按钮。

插件本地识别时匹配的 CSS 选择器（标签、ARIA role、常见组件库 class）。