Antd-v

主题

Upload 上传 ​

何时使用 ​

上传是将信息（网页、文字、图片、视频等）通过网页或者上传工具发布到远程服务器上的过程。

  • 当需要上传一个或一些文件时。
  • 当需要展现上传的进度时。
  • 当需要使用拖拽交互时。

代码演示 ​

点击上传 ​

loading

用户头像 ​

loading

已上传的文件列表 ​

loading

照片墙 ​

loading

拖拽上传 ​

loading

粘贴上传 ​

loading

文件夹上传 ​

loading

图片列表样式 ​

loading

自定义预览 ​

loading

API ​

参数说明类型默认值版本
accept接受上传的文件类型，详见 input accept Attributestring-
action上传的地址string | (file) => Promise<string>-
beforeUpload上传文件之前的钩子，参数为上传的文件，若返回 false 则停止上传。支持返回一个 Promise 对象，Promise 对象 reject 时则停止上传，resolve 时开始上传（ resolve 传入 File 或 Blob 对象则上传 resolve 传入对象）；也可以返回 Upload.LIST_IGNORE，此时列表中将不展示此文件。 注意：IE9 不支持该方法(file, fileList) => boolean | Promise<File> | Upload.LIST_IGNORE-
customRequest通过覆盖默认的上传行为，可以自定义自己的上传实现function-
data上传所需额外参数或返回上传额外参数的方法object|(file) => object | Promise&lt;object>-
directory支持上传文件夹（caniuse）booleanfalse
disabled是否禁用booleanfalse对于自定义 Upload children 时请将 disabled 属性同时传给 child node 确保 disabled 渲染效果保持一致
fileList(v-model)已经上传的文件列表（受控），使用此参数时，如果遇到 onChange 只调用一次的问题，请参考 #2423UploadFile[]-
headers设置上传的请求头部，IE10 以上有效object-
iconRender自定义显示 icon(file: UploadFile, listType?: UploadListType) => VNode-
isImageUrl自定义缩略图是否使用 <img /> 标签进行显示(file: UploadFile) => boolean(内部实现)
itemRender自定义上传列表项(originNode: VNode, file: UploadFile, fileList: object[], actions: { download: function, preview: function, remove: function }) => VNode-4.16.0
listType上传列表的内建样式，支持四种基本样式 text, picture, picture-card 和 picture-circlestringtextpicture-circle(5.2.0+)
maxCount限制上传数量。当为 1 时，始终用最新上传的文件代替当前文件number-4.10.0
method上传请求的 http methodstringpost
multiple是否支持多选文件，ie10+ 支持。开启后按住 ctrl 可选择多个文件booleanfalse
name发到后台的文件参数名stringfile
openFileDialogOnClick点击打开文件对话框booleantrue
pastable是否支持粘贴文件booleanfalse5.25.0
previewFile自定义文件预览逻辑(file: File | Blob) => Promise<dataURL: string>-
progress自定义进度条样式[ProgressProps]（仅支持 type="line"）{ strokeWidth: 2, showInfo: false }4.3.0
showUploadList是否展示文件列表, 可设为一个对象，用于单独设定 extra(5.20.0+), showPreviewIcon, showRemoveIcon, showDownloadIcon, removeIcon 和 downloadIconboolean | { extra?: VNode | (file: UploadFile) => VNode, showPreviewIcon?: boolean | (file: UploadFile) => boolean, showDownloadIcon?: boolean | (file: UploadFile) => boolean, showRemoveIcon?: boolean | (file: UploadFile) => boolean, previewIcon?: VNode | (file: UploadFile) => VNode, removeIcon?: VNode | (file: UploadFile) => VNode, downloadIcon?: VNode | (file: UploadFile) => VNode }trueextra: 5.20.0, showPreviewIcon function: 5.21.0, showRemoveIcon function: 5.21.0, showDownloadIcon function: 5.21.0
withCredentials上传请求时是否携带 cookiebooleanfalse
onChange上传文件改变时的回调，上传每个阶段都会触发该事件。详见 onChangefunction-
onDrop当文件被拖入上传区域时执行的回调功能(event: DragEvent) => void-4.16.0
onDownload点击下载文件时的回调，如果没有指定，则默认跳转到文件 url 对应的标签页function(file): void(跳转新标签页)
onPreview点击文件链接或预览图标时的回调function(file)-
onRemove点击移除文件时的回调，返回值为 false 时不移除。支持返回一个 Promise 对象，Promise 对象 resolve(false) 或 reject 时不移除function(file): boolean | Promise-

UploadFile ​

继承自 File，附带额外属性用于渲染。

参数说明类型默认值版本
crossOriginCORS 属性设置'anonymous' | 'use-credentials' | ''-4.20.0
name文件名string--
percent上传进度number--
status上传状态，不同状态展示颜色也会有所不同error | done | uploading | removed--
thumbUrl缩略图地址string--
uid唯一标识符，不设置时会自动生成string--
url下载地址string--

onChange ​

💡 上传中、完成、失败都会调用这个函数。

文件状态改变的回调，返回为：

js
{
  file: { /* ... */ },
  fileList: [ /* ... */ ],
  event: { /* ... */ },
}

  1. file 当前操作的文件对象。

    js
    {
   uid: 'uid',      // 文件唯一标识，建议设置为负数，防止和内部产生的 id 冲突
   name: 'xx.png',   // 文件名
   status: 'done' | 'uploading' | 'error' | 'removed' , //  beforeUpload 拦截的文件没有 status 状态属性
   response: '{"status": "success"}', // 服务端响应内容
   linkProps: '{"download": "image"}', // 下载链接额外的 HTML 属性
}

  2. fileList 当前的文件列表。

  3. event 上传中的服务端响应内容，包含了上传进度等信息，高级浏览器支持。

基于 MIT 许可发布