ng-zorro里的nz-upload参数详解 nzChange的status返回值详解

ZPY

6年 ago

nz-upload COMPONENT#

参数	说明	类型	默认值
`[nzAccept]`	接受上传的文件类型, 详见 input accept Attribute	string	-
`[nzAction]`	必选参数, 上传的地址	string	-
`[nzDirectory]`	支持上传文件夹（caniuse）	boolean	false
`[nzBeforeUpload]`	上传文件之前的钩子，参数为上传的文件，若返回 `false` 则停止上传。注意：IE9 不支持该方法；注意：务必使用 `=>` 定义处理方法。	(file, fileList) => `boolean	Observable`	-
`[nzCustomRequest]`	通过覆盖默认的上传行为，可以自定义自己的上传实现；注意：务必使用 `=>` 定义处理方法。	`(item) => Subscription`	-
`[nzData]`	上传所需参数或返回上传参数的方法；注意：务必使用 `=>` 定义处理方法。	`Object	((file: UploadFile) => Object)`	-
`[nzDisabled]`	是否禁用	boolean	false
`[nzFileList]`	文件列表，双向绑定	UploadFile[]	-
`[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: UploadFile) => Object)`	-
`[nzListType]`	上传列表的内建样式，支持三种基本样式 `text`, `picture`和 `picture-card`	string	'text'
`[nzMultiple]`	是否支持多选文件，`ie10+` 支持。开启后按住 ctrl 可选择多个文件。	boolean	false
`[nzName]`	发到后台的文件参数名	string	'file'
`[nzShowUploadList]`	是否展示 uploadList, 可设为一个对象，用于单独设定 showPreviewIcon 和 showRemoveIcon	`Boolean or { showPreviewIcon?: boolean, showRemoveIcon?: boolean }`	true
`[nzShowButton]`	是否展示上传按钮	boolean	true
`[nzWithCredentials]`	上传请求时是否携带 cookie	boolean	false
`[nzPreview]`	点击文件链接或预览图标时的回调；注意：务必使用 `=>` 定义处理方法。	`(file: UploadFile) => void`	-
`[nzRemove]`	点击移除文件时的回调，返回值为 false 时不移除。支持返回 `Observable` 对象；注意：务必使用 `=>` 定义处理方法。	(file: UploadFile) => `boolean｜Observable`	无
`(nzChange)`	上传文件改变时的状态	EventEmitter

nzChange#

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

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

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

file 当前操作的文件对象。

{
   uid: 'uid',      // 文件唯一标识
   name: 'xx.png'   // 文件名
   status: 'done', // 状态有：uploading done error removed
   response: '{"status": "success"}' // 服务端响应内容
}

fileList 当前的文件列表。

其 status 值如下：

事件	状态值	触发	其它
开始	uploading	选择文件后	-
上传进度	uploading	上传过程中后端返回 `total`、`loaded` 等时触发	`nzChange` 的 `file` 会携带 `percent` 值表示百分比与 `event` 表示完整返回参数数据
成功	done	后端告知完成时	`nzChange` 的 `file` 会携带 `response` 值表示结果且无 `event` 参数
错误	error	后端告知错误或HTTP中断等	`nzChange` 的 `file` 会携带 `message` 值表示错误文本且无 `event` 参数

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