点击上传

用户头像

已上传的文件列表

照片墙

完全控制的上传列表

Upload上传

文件选择上传和拖拽上传控件。

何时使用#

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

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

import { NzUploadModule } from 'ng-zorro-antd/upload';

代码演示

点击上传

经典款式，用户点击按钮弹出文件选择框。

      加载中

使用 nzFileList 设置已上传的内容。

      加载中

xxx.png

完全控制的上传列表

使用 nzFileList 对列表进行完全控制，可以实现各种自定义功能，以下演示二种情况：

上传列表数量的限制。
读取远程路径并显示链接。

      加载中

文件夹上传

支持上传一个文件夹里的所有文件。

      加载中

xxx.png

yyy.png

xxx.png

yyy.png

图片列表样式

上传文件为图片，可展示本地缩略图。IE8/9 不支持浏览器本地缩略图展示（Ref），可以写 thumbUrl 属性来代替。

      加载中

上传前转换文件

使用 nzTransformFile 转换上传的文件（例如添加水印）。

      加载中

Upload

用户头像

点击上传用户头像，并使用 nzBeforeUpload 限制用户上传的图片格式和大小。

nzBeforeUpload 的返回值可以是一个 Observable 以支持也支持异步检查。

      加载中

image.png

文件上传中

image.png

Upload

照片墙

用户可以上传图片并在列表中显示缩略图。当上传照片数到达限制后，上传按钮消失。

      加载中

Click or drag file to this area to upload

Support for a single or bulk upload. Strictly prohibit from uploading company data or other band files

拖拽上传

把文件拖入指定区域，完成上传，同样支持点击上传。

设置 nzMultiple 后，在 IE10+ 可以一次上传多个文件。

      加载中

手动上传

nzBeforeUpload 返回 false 后，手动上传文件。

      加载中

自定义预览

自定义本地预览，用于处理非图片格式文件（例如视频文件）。

      加载中

Photos:

阿里云 OSS

使用阿里云 OSS 上传示例.

      加载中

API#

服务端上传接口实现可以参考 jQuery-File-Upload。

nz-uploadcomponent#

参数	说明	类型	默认值
`[nzAccept]`	接受上传的文件类型, 详见 input accept Attribute	`string`	-
`[nzAction]`	必选参数, 上传的地址	`string \| ((file: NzUploadFile) => string \| Observable<string>)`	-
`[nzDirectory]`	支持上传文件夹（caniuse）	`boolean`	`false`
`[nzBeforeUpload]`	上传文件之前的钩子，参数为上传的文件，若返回 `false` 则停止上传。注意：IE9 不支持该方法；注意：务必使用 `=>` 定义处理方法。	`(file: NzUploadFile, fileList: NzUploadFile[]) => boolean \| Observable<boolean>`	-
`[nzCustomRequest]`	通过覆盖默认的上传行为，可以自定义自己的上传实现；注意：务必使用 `=>` 定义处理方法。	`(item) => Subscription`	-
`[nzData]`	上传所需参数或返回上传参数的方法；注意：务必使用 `=>` 定义处理方法。	`Object \| ((file: NzUploadFile) => Object \| Observable<{}>)`	-
`[nzDisabled]`	是否禁用	`boolean`	`false`
`[nzFileList]`	文件列表，双向绑定	`NzUploadFile[]`	-
`[nzLimit]`	限制单次最多上传数量，`nzMultiple` 打开时有效；`0` 表示不限	`number`	`0`
`[nzSize]`	限制文件大小，单位：KB；`0` 表示不限	`number`	`0`
`[nzFileType]`	限制文件类型，例如：`image/png,image/jpeg,image/gif,image/bmp`	`string`	-
`[nzFilter]`	自定义过滤器	`UploadFilter[]`	-
`[nzHeaders]`	设置上传的请求头部，IE10 以上有效；注意：务必使用 `=>` 定义处理方法。	`Object \| ((file: NzUploadFile) => Object \| Observable<{}>)`	-
`[nzListType]`	上传列表的内建样式，支持三种基本样式 `text`, `picture` 和 `picture-card`	`'text' \| 'picture' \| 'picture-card'`	`'text'`
`[nzMultiple]`	是否支持多选文件，`ie10+` 支持。开启后按住 ctrl 可选择多个文件。	`boolean`	`false`
`[nzName]`	发到后台的文件参数名	`string`	`'file'`
`[nzShowUploadList]`	是否展示 uploadList, 可设为一个对象，用于单独设定 `showPreviewIcon`，`showRemoveIcon` 和 `showDownloadIcon`	`boolean \| { showPreviewIcon?: boolean, showRemoveIcon?: boolean, showDownloadIcon?: boolean }`	`true`
`[nzShowButton]`	是否展示上传按钮	`boolean`	`true`
`[nzWithCredentials]`	上传请求时是否携带 cookie	`boolean`	`false`
`[nzOpenFileDialogOnClick]`	点击打开文件对话框	`boolean`	`true`
`[nzPreview]`	点击文件链接或预览图标时的回调；注意：务必使用 `=>` 定义处理方法。	`(file: NzUploadFile) => void`	-
`[nzPreviewFile]`	自定义文件预览逻辑；注意：务必使用 `=>` 定义处理方法。	`(file: NzUploadFile) => Observable<dataURL: string>`	-
`[nzPreviewIsImage]`	自定义预览文件是否有效图像，一般用于图像 URL 为非标准格式；注意：务必使用 `=>` 定义处理方法。	`(file: NzUploadFile) => boolean`	-
`[nzRemove]`	点击移除文件时的回调，返回值为 false 时不移除。支持返回 `Observable` 对象；注意：务必使用 `=>` 定义处理方法。	`(file: NzUploadFile) => boolean \| Observable<boolean>`	-
`(nzChange)`	上传文件改变时的状态	`EventEmitter<NzUploadChangeParam>`	-
`[nzDownload]`	点击下载文件时的回调，如果没有指定，则默认跳转到文件 url 对应的标签页	`(file: NzUploadFile) => void`	跳转新标签页
`[nzTransformFile]`	在上传之前转换文件。支持返回一个 Observable 对象	`(file: NzUploadFile) => NzUploadTransformFileType`	-
`[nzIconRender]`	自定义显示 icon	`TemplateRef<{ $implicit: NzUploadFile }>`	-
`[nzFileListRender]`	自定义显示整个列表	`TemplateRef<{ $implicit: NzUploadFile[] }>`	-

nzChange#

开始、上传进度、完成、失败都会调用这个函数。

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

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

file 当前操作的文件对象。

{
   uid: 'uid',      // 文件唯一标识
   name: 'xx.png'   // 文件名
   status: 'done', // 状态有：uploading done error removed
   response: '{"status": "success"}', // 服务端响应内容
   linkProps: '{"download": "image"}', // 下载链接额外的 HTML 属性
}

fileList 当前的文件列表。
event 上传中的服务端响应内容，包含了上传进度等信息，高级浏览器支持。

nzCustomRequest#

默认使用 HTML5 方式上传（即：使用 HttpClient），允许覆盖默认行为实现定制需求，例如直接与阿里云交互等。

nzCustomRequest 回调传递以下参数：

onProgress: (event: { percent: number }): void
onError: (event: Error): void
onSuccess: (body: Object, xhr?: Object): void
data: Object
filename: String
file: File
withCredentials: Boolean
action: String
headers: Object