ant-design Upload 组件入门：从「点击上传」Demo 到源码级解析-北京尧图网络

ant-design Upload 组件入门从「点击上传」Demo 到源码级解析【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/gh_mirrors/antde/ant-design上传是 Web 表单类交互中最常见的需求之一把本地文件通过网络提交到远程服务器并实时反馈进度与结果。ant-designAnt Design作为企业级 React UI 组件库在 components/upload/index.jsx 中封装了Upload组件而components/upload/demo/basic.md正是它最经典的「点击上传」示例用户点击按钮弹出文件选择框选中文件后即自动发起上传。读完本篇你将掌握Upload组件的最小可用配置、核心参数与回调的使用方法并能结合源码理解文件状态流转与底层实现原理。一、经典「点击上传」Demo 解读1.1 最小可用代码components/upload/demo/basic.md给出了 Upload 组件最经典、最简洁的用法——点击按钮触发文件选择选择后自动上传import { Upload, message, Button, Icon } from antd; const props { name: file, action: /upload.do, headers: { authorization: authorization-text, }, onChange(info) { if (info.file.status ! uploading) { console.log(info.file, info.fileList); } if (info.file.status done) { message.success(${info.file.name} 上传成功。); } else if (info.file.status error) { message.error(${info.file.name} 上传失败。); } } }; ReactDOM.render( Upload {...props} Button typeghost Icon typeupload / 点击上传 /Button /Upload , mountNode);这段代码展示了 Upload 的核心工作方式action必选参数指定文件上传的服务端地址示例中的/upload.do为示意地址实际开发需替换为真实接口name上传文件的字段名服务端应通过该字段名接收文件默认值为fileheaders自定义请求头示例中携带了authorization鉴权信息onChange监听文件状态变化根据info.file.status区分done成功与error失败配合message组件给出用户反馈。1.2 从 UI 结构理解组件形态从 index.jsx 的 render 方法可以看到type select默认时组件渲染结构为span className{className} div classNameant-upload ant-upload-select ant-upload-select-text Upload // 来自 rc-upload内部隐藏 input[typefile] {children} // 这里即 Button点击上传/Button /Upload /div {uploadList} // showUploadList 为 true 时渲染文件列表 /span也就是说Upload的子节点只是触发器的外观真正负责文件选择的input typefile由底层 rc-upload 库隐藏渲染点击按钮会冒泡触发其原生文件选择框。用户选中文件后组件立即自动发起上传请求无需额外调用提交方法。二、Upload 核心 API 全解析components/upload/index.md的 API 表格与 index.jsx 的 getDefaultProps 相互印证以下是完整参数说明参数说明类型默认值name上传文件的字段名服务端以此接收文件Stringfileaction必选上传的地址String无data上传时附带的额外参数Object会随请求一起提交Object无headers自定义请求头IE10 以上有效Object无showUploadList是否展示已上传文件列表Booleantruemultiple是否支持多选文件ie10支持开启后按住 ctrl 可选择多个文件Booleanfalseaccept接受的文件类型详见 input 的 accept 属性String无beforeUpload上传前的钩子参数为待上传的文件返回false或 Promise 则停止上传不支持老 IEFunction无onChange文件状态改变时的回调Function无listType上传列表的内建样式支持text或pictureStringtextclassName自定义类名String无注源码中listType实际还支持picture-card见 uploadList.jsx 的分支判断对应「照片墙」样式getDefaultProps中data: {}、onChange: noop、beforeUpload: T恒返回 true等默认值也与表格一致。2.1 onChange 回调的返回值onChange在文件状态改变时触发返回对象结构为{ file: { ... }, fileList: [ ... ], event: { ... } }其中file当前操作的文件对象关键字段如下{ uid: uid, // 文件唯一标识建议设置为负数防止和内部产生的 id 冲突 name: xx.png, // 文件名 status: done, // 状态有uploading done error removed response: {status:success} // 服务端响应内容 }当multiple开启时此参数为对象数组[file, ...]。fileList当前的文件列表。event上传过程中的服务端响应内容包含上传进度等信息高级浏览器支持。2.2 文件状态流转与源码印证在 index.jsx 中可以清晰看到文件对象的生命周期uploadingonStart中调用fileToObject将原生 File 转为组件内部对象并置为uploadingindex.jsx#L64-L89doneonSuccess中将targetItem.status置为done并写入responseindex.jsx#L113-L131erroronError中记录error、response并置为errorindex.jsx#L145-L153removed用户删除列表项时handleManualRemove先将status置为removed再移除index.jsx#L170-L175。Demo 中正是利用info.file.status判断上传结果并给出message提示这与组件的状态机完全对应。另外文件对象的匹配通过 getFileItem.js 实现有uid时按 uid 匹配否则按 name 匹配这也是官方建议uid使用负数的原因——避免与 rc-upload 内部生成的 id 冲突。三、从「点击上传」延伸的实战能力基于 basic demo 的最小配置配合其他官方 Demo 可以快速扩展出完整的上传能力3.1 上传前校验beforeUpload参考 components/upload/demo/beforeUpload.md在文件真正上传前拦截校验例如只允许 JPGconst props { action: /upload.do, beforeUpload(file) { const isJPG file.type image/jpeg; if (!isJPG) { message.error(只能上传 JPG 文件哦); } return isJPG; // 返回 false 则停止上传 } };从源码看beforeUpload的返回值会被记录为this.recentUploadStatus并返回给底层从而决定是否继续上传流程index.jsx#L155-L158onStart中也会检查该状态决定是否接收新文件index.jsx#L65。3.2 传入已上传的文件defaultFileList / fileList使用defaultFileList展示已上传的历史文件见 components/upload/demo/defaultFileList.md每项包含uid、name、status、url等字段使用fileList对列表进行完全受控管理见 components/upload/demo/fileList.md可在onChange中实现数量限制、读取服务端返回的远程路径并展示链接、按response.status筛选成功文件等自定义逻辑展示下载链接时只需在 fileList 数组项上设置url属性组件即会将其渲染为可点击的链接见 uploadList.jsx。3.3 多文件与拖拽上传设置multiple: true支持按住 ctrl 多选ie10见 components/upload/demo/multiple.md使用Upload.Dragger实现拖拽上传见 components/upload/demo/drag.md。Dragger在源码中只是把type固定为drag的 Uploadindex.jsx#L288-L292渲染时监听onDrop、onDragOver、onDragLeave切换ant-upload-drag-hover等样式类。四、使用前提与注意事项action为必选参数必须指向实际可接收上传文件的接口地址Demo 中的/upload.do为占位地址headers、multiple等能力依赖较新的浏览器特性IE10老版本 IE 下需要额外的降级处理官方文档在 components/upload/index.md 的「IE note」一节对此有专门说明组件为自动上传模式选中文件即触发上传无需手动提交这也是 basic demo「点击上传」体验的核心若需控制文件读取与预览可参考 uploadList.jsx 中基于FileReader.readAsDataURL的缩略图预览实现适用于picture/picture-card列表样式。五、小结components/upload/demo/basic.md以不足 40 行的代码完整演示了 ant-designUpload组件最核心的用法通过action指定上传地址、以name定义字段名、用headers携带鉴权信息并在onChange中依据file.status给出成功/失败反馈。结合 components/upload/index.md 的 API 文档与 components/upload/index.jsx 的源码实现你可以快速上手并扩展出校验、多选、拖拽、受控列表等企业级上传场景。建议将此 Demo 作为起点配合仓库内 demo 目录的其余示例逐步深入。【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/gh_mirrors/antde/ant-design创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

ant-design Upload 组件入门：从「点击上传」Demo 到源码级解析

相关推荐

ZenML 集成 BentoML Model Deployer 实战：从 Bento 构建到本地 HTTP 与容器化模型部署

在 Cloudflare Agents 项目中固化未发布依赖：pi AgentHarness 的 vendored 开发版构建输入解析

我用华为云码道从0到1做出一款战棋游戏：一个周末的完整实战记录

更多资讯

Monolith：面向内容推荐场景的轻量级推荐系统——实时捕捉用户兴趣，一步跑通训练与推理

Ant Design Tree 树形控件入门实战：从 basic 示例掌握展开、选中、勾选与禁用

Windows下PyCharm Ctrl+Alt+L失效的根因与系统级修复方案

Altium Designer导入OrCAD .DSN文件的完整技术指南

回归测试的本质：缺陷驱动的靶向验证与环境感知

esp-iot-solution 的 i2c_bus 组件演进史与源码剖析：从硬件 I2C 到软件 I2C 的完整实践指南

今日更新

AReaL 调试指南：从 Agent Workflow 验证到分布式训练死锁诊断

MATLAB实现GPS L1 C/A信号仿真与二维捕获验证

彻底搞懂ASCII、Unicode与UTF-8：从乱码根源到编码实战

本周精选

AI驱动的自动化专利分析平台技术解析

LeetCode-Go 题解：1252. Cells with Odd Values in a Matrix（奇数值单元格计数）双解法剖析

在线答疑系统Java毕设实战：Spring Boot前后端分离与状态流转

本月热门

基于YOLO的焊缝缺陷检测：从数据标注到工业部署全流程实践

分布式服务的决策记录

创业产品的首版范围

读完文章，想聊聊您的网站？