Upload上传

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

何时使用

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

  • 当需要上传一个或一些文件时。
  • 当需要展现上传的进度时。
  • 当需要使用拖拽交互时。
  1. import { NzUploadModule } from 'ng-zorro-antd/upload';

代码演示

Upload上传 - 图1

点击上传

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

  1. import { Component } from '@angular/core';
  2. import { NzMessageService } from 'ng-zorro-antd/message';
  3. import { UploadChangeParam } from 'ng-zorro-antd/upload';
  4. @Component({
  5. selector: 'nz-demo-upload-basic',
  6. template: `
  7. <nz-upload
  8. nzAction="https://www.mocky.io/v2/5cc8019d300000980a055e76"
  9. [nzHeaders]="{ authorization: 'authorization-text' }"
  10. (nzChange)="handleChange($event)"
  11. >
  12. <button nz-button><i nz-icon nzType="upload"></i>Click to Upload</button>
  13. </nz-upload>
  14. `
  15. })
  16. export class NzDemoUploadBasicComponent {
  17. constructor(private msg: NzMessageService) {}
  18. handleChange(info: UploadChangeParam): void {
  19. if (info.file.status !== 'uploading') {
  20. console.log(info.file, info.fileList);
  21. }
  22. if (info.file.status === 'done') {
  23. this.msg.success(`${info.file.name} file uploaded successfully`);
  24. } else if (info.file.status === 'error') {
  25. this.msg.error(`${info.file.name} file upload failed.`);
  26. }
  27. }
  28. }

Upload上传 - 图2

已上传的文件列表

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

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-upload-default-file-list',
  4. template: `
  5. <nz-upload nzAction="https://www.mocky.io/v2/5cc8019d300000980a055e76" [nzFileList]="fileList">
  6. <button nz-button><i nz-icon nzType="upload"></i>Upload</button>
  7. </nz-upload>
  8. `
  9. })
  10. export class NzDemoUploadDefaultFileListComponent {
  11. fileList = [
  12. {
  13. uid: '1',
  14. name: 'xxx.png',
  15. status: 'done',
  16. response: 'Server Error 500', // custom error message to show
  17. url: 'http://www.baidu.com/xxx.png'
  18. },
  19. {
  20. uid: '2',
  21. name: 'yyy.png',
  22. status: 'done',
  23. url: 'http://www.baidu.com/yyy.png'
  24. },
  25. {
  26. uid: '3',
  27. name: 'zzz.png',
  28. status: 'error',
  29. response: 'Server Error 500', // custom error message to show
  30. url: 'http://www.baidu.com/zzz.png'
  31. }
  32. ];
  33. }

Upload上传 - 图3

完全控制的上传列表

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

  1. 上传列表数量的限制。

  2. 读取远程路径并显示链接。

  1. import { Component } from '@angular/core';
  2. import { UploadChangeParam, UploadFile } from 'ng-zorro-antd/upload';
  3. @Component({
  4. selector: 'nz-demo-upload-file-list',
  5. template: `
  6. <nz-upload nzAction="https://www.mocky.io/v2/5cc8019d300000980a055e76" [nzFileList]="fileList" (nzChange)="handleChange($event)">
  7. <button nz-button><i nz-icon nzType="upload"></i>Upload</button>
  8. </nz-upload>
  9. `
  10. })
  11. export class NzDemoUploadFileListComponent {
  12. fileList: UploadFile[] = [
  13. {
  14. uid: '-1',
  15. name: 'xxx.png',
  16. status: 'done',
  17. url: 'http://www.baidu.com/xxx.png'
  18. }
  19. ];
  20. handleChange(info: UploadChangeParam): void {
  21. let fileList = [...info.fileList];
  22. // 1. Limit the number of uploaded files
  23. // Only to show two recent uploaded files, and old ones will be replaced by the new
  24. fileList = fileList.slice(-2);
  25. // 2. Read from response and show file link
  26. fileList = fileList.map(file => {
  27. if (file.response) {
  28. // Component will show file.url as link
  29. file.url = file.response.url;
  30. }
  31. return file;
  32. });
  33. this.fileList = fileList;
  34. }
  35. }

Upload上传 - 图4

文件夹上传

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

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-upload-directory',
  4. template: `
  5. <nz-upload nzAction="https://www.mocky.io/v2/5cc8019d300000980a055e76" nzDirectory>
  6. <button nz-button><i nz-icon nzType="upload"></i> Upload Directory</button>
  7. </nz-upload>
  8. `
  9. })
  10. export class NzDemoUploadDirectoryComponent {}

Upload上传 - 图5

图片列表样式

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

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-upload-picture-style',
  4. template: `
  5. <div class="clearfix">
  6. <nz-upload nzAction="https://www.mocky.io/v2/5cc8019d300000980a055e76" nzListType="picture" [(nzFileList)]="fileList1">
  7. <button nz-button><i nz-icon nzType="upload"></i>Upload</button>
  8. </nz-upload>
  9. </div>
  10. <br /><br />
  11. <div class="clearfix">
  12. <nz-upload
  13. class="upload-list-inline"
  14. nzAction="https://www.mocky.io/v2/5cc8019d300000980a055e76"
  15. nzListType="picture"
  16. [(nzFileList)]="fileList2"
  17. >
  18. <button nz-button>
  19. <span><i nz-icon nzType="upload"></i> Upload</span>
  20. </button>
  21. </nz-upload>
  22. </div>
  23. `,
  24. styles: [
  25. `
  26. :host ::ng-deep .upload-list-inline .ant-upload-list-item {
  27. float: left;
  28. width: 200px;
  29. margin-right: 8px;
  30. }
  31. :host ::ng-deep .upload-list-inline [class*='-upload-list-rtl'] .ant-upload-list-item {
  32. float: right;
  33. }
  34. :host ::ng-deep .upload-list-inline .ant-upload-animate-enter {
  35. animation-name: uploadAnimateInlineIn;
  36. }
  37. :host ::ng-deep .upload-list-inline .ant-upload-animate-leave {
  38. animation-name: uploadAnimateInlineOut;
  39. }
  40. `
  41. ]
  42. })
  43. export class NzDemoUploadPictureStyleComponent {
  44. defaultFileList = [
  45. {
  46. uid: -1,
  47. name: 'xxx.png',
  48. status: 'done',
  49. url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
  50. thumbUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'
  51. },
  52. {
  53. uid: -2,
  54. name: 'yyy.png',
  55. status: 'error'
  56. }
  57. ];
  58. fileList1 = [...this.defaultFileList];
  59. fileList2 = [...this.defaultFileList];
  60. }

Upload上传 - 图6

上传前转换文件

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

  1. import { Component } from '@angular/core';
  2. import { UploadFile } from 'ng-zorro-antd/upload';
  3. import { Observable, Observer } from 'rxjs';
  4. @Component({
  5. selector: 'nz-demo-upload-transform-file',
  6. template: `
  7. <nz-upload nzAction="https://www.mocky.io/v2/5cc8019d300000980a055e76" [nzTransformFile]="transformFile">
  8. <button nz-button><i nz-icon nzType="upload"></i> Upload</button>
  9. </nz-upload>
  10. `
  11. })
  12. export class NzDemoUploadTransformFileComponent {
  13. transformFile = (file: UploadFile) => {
  14. return new Observable((observer: Observer<Blob>) => {
  15. const reader = new FileReader();
  16. // tslint:disable-next-line: no-any
  17. reader.readAsDataURL(file as any);
  18. reader.onload = () => {
  19. const canvas = document.createElement('canvas');
  20. const img = document.createElement('img');
  21. img.src = reader.result as string;
  22. img.onload = () => {
  23. const ctx = canvas.getContext('2d')!;
  24. ctx.drawImage(img, 0, 0);
  25. ctx.fillStyle = 'red';
  26. ctx.textBaseline = 'middle';
  27. ctx.fillText('Ant Design', 20, 20);
  28. canvas.toBlob(blob => {
  29. observer.next(blob!);
  30. observer.complete();
  31. });
  32. };
  33. };
  34. });
  35. };
  36. }

Upload上传 - 图7

用户头像

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

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

  1. import { Component } from '@angular/core';
  2. import { NzMessageService } from 'ng-zorro-antd/message';
  3. import { UploadFile } from 'ng-zorro-antd/upload';
  4. import { Observable, Observer } from 'rxjs';
  5. @Component({
  6. selector: 'nz-demo-upload-avatar',
  7. template: `
  8. <nz-upload
  9. class="avatar-uploader"
  10. nzAction="https://www.mocky.io/v2/5cc8019d300000980a055e76"
  11. nzName="avatar"
  12. nzListType="picture-card"
  13. [nzShowUploadList]="false"
  14. [nzBeforeUpload]="beforeUpload"
  15. (nzChange)="handleChange($event)"
  16. >
  17. <ng-container *ngIf="!avatarUrl">
  18. <i class="upload-icon" nz-icon [nzType]="loading ? 'loading' : 'plus'"></i>
  19. <div class="ant-upload-text">Upload</div>
  20. </ng-container>
  21. <img *ngIf="avatarUrl" [src]="avatarUrl" style="width: 100%" />
  22. </nz-upload>
  23. `,
  24. styles: [
  25. `
  26. :host ::ng-deep .avatar-uploader > .ant-upload {
  27. width: 128px;
  28. height: 128px;
  29. }
  30. `
  31. ]
  32. })
  33. export class NzDemoUploadAvatarComponent {
  34. loading = false;
  35. avatarUrl: string;
  36. constructor(private msg: NzMessageService) {}
  37. beforeUpload = (file: File) => {
  38. return new Observable((observer: Observer<boolean>) => {
  39. const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
  40. if (!isJpgOrPng) {
  41. this.msg.error('You can only upload JPG file!');
  42. observer.complete();
  43. return;
  44. }
  45. const isLt2M = file.size / 1024 / 1024 < 2;
  46. if (!isLt2M) {
  47. this.msg.error('Image must smaller than 2MB!');
  48. observer.complete();
  49. return;
  50. }
  51. observer.next(isJpgOrPng && isLt2M);
  52. observer.complete();
  53. });
  54. };
  55. private getBase64(img: File, callback: (img: string) => void): void {
  56. const reader = new FileReader();
  57. reader.addEventListener('load', () => callback(reader.result!.toString()));
  58. reader.readAsDataURL(img);
  59. }
  60. handleChange(info: { file: UploadFile }): void {
  61. switch (info.file.status) {
  62. case 'uploading':
  63. this.loading = true;
  64. break;
  65. case 'done':
  66. // Get this url from response in real world.
  67. this.getBase64(info.file!.originFileObj!, (img: string) => {
  68. this.loading = false;
  69. this.avatarUrl = img;
  70. });
  71. break;
  72. case 'error':
  73. this.msg.error('Network error');
  74. this.loading = false;
  75. break;
  76. }
  77. }
  78. }

Upload上传 - 图8

照片墙

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

  1. import { Component } from '@angular/core';
  2. import { UploadFile } from 'ng-zorro-antd/upload';
  3. function getBase64(file: File): Promise<string | ArrayBuffer | null> {
  4. return new Promise((resolve, reject) => {
  5. const reader = new FileReader();
  6. reader.readAsDataURL(file);
  7. reader.onload = () => resolve(reader.result);
  8. reader.onerror = error => reject(error);
  9. });
  10. }
  11. @Component({
  12. selector: 'nz-demo-upload-picture-card',
  13. template: `
  14. <div class="clearfix">
  15. <nz-upload
  16. nzAction="https://www.mocky.io/v2/5cc8019d300000980a055e76"
  17. nzListType="picture-card"
  18. [(nzFileList)]="fileList"
  19. [nzShowButton]="fileList.length < 8"
  20. [nzPreview]="handlePreview"
  21. >
  22. <i nz-icon nzType="plus"></i>
  23. <div class="ant-upload-text">Upload</div>
  24. </nz-upload>
  25. <nz-modal [nzVisible]="previewVisible" [nzContent]="modalContent" [nzFooter]="null" (nzOnCancel)="previewVisible = false">
  26. <ng-template #modalContent>
  27. <img [src]="previewImage" [ngStyle]="{ width: '100%' }" />
  28. </ng-template>
  29. </nz-modal>
  30. </div>
  31. `,
  32. styles: [
  33. `
  34. i[nz-icon] {
  35. font-size: 32px;
  36. color: #999;
  37. }
  38. .ant-upload-text {
  39. margin-top: 8px;
  40. color: #666;
  41. }
  42. `
  43. ]
  44. })
  45. export class NzDemoUploadPictureCardComponent {
  46. fileList = [
  47. {
  48. uid: '-1',
  49. name: 'image.png',
  50. status: 'done',
  51. url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'
  52. },
  53. {
  54. uid: '-2',
  55. name: 'image.png',
  56. status: 'done',
  57. url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'
  58. },
  59. {
  60. uid: '-3',
  61. name: 'image.png',
  62. status: 'done',
  63. url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'
  64. },
  65. {
  66. uid: '-4',
  67. name: 'image.png',
  68. status: 'done',
  69. url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'
  70. },
  71. {
  72. uid: '-5',
  73. name: 'image.png',
  74. status: 'error'
  75. }
  76. ];
  77. previewImage: string | undefined = '';
  78. previewVisible = false;
  79. handlePreview = async (file: UploadFile) => {
  80. if (!file.url && !file.preview) {
  81. file.preview = await getBase64(file.originFileObj!);
  82. }
  83. this.previewImage = file.url || file.preview;
  84. this.previewVisible = true;
  85. };
  86. }

Upload上传 - 图9

拖拽上传

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

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

  1. import { Component } from '@angular/core';
  2. import { NzMessageService } from 'ng-zorro-antd/message';
  3. import { UploadChangeParam } from 'ng-zorro-antd/upload';
  4. @Component({
  5. selector: 'nz-demo-upload-drag',
  6. template: `
  7. <nz-upload
  8. nzType="drag"
  9. [nzMultiple]="true"
  10. nzAction="https://www.mocky.io/v2/5cc8019d300000980a055e76"
  11. (nzChange)="handleChange($event)"
  12. >
  13. <p class="ant-upload-drag-icon">
  14. <i nz-icon nzType="inbox"></i>
  15. </p>
  16. <p class="ant-upload-text">Click or drag file to this area to upload</p>
  17. <p class="ant-upload-hint">
  18. Support for a single or bulk upload. Strictly prohibit from uploading company data or other band files
  19. </p>
  20. </nz-upload>
  21. `
  22. })
  23. export class NzDemoUploadDragComponent {
  24. constructor(private msg: NzMessageService) {}
  25. handleChange({ file, fileList }: UploadChangeParam): void {
  26. const status = file.status;
  27. if (status !== 'uploading') {
  28. console.log(file, fileList);
  29. }
  30. if (status === 'done') {
  31. this.msg.success(`${file.name} file uploaded successfully.`);
  32. } else if (status === 'error') {
  33. this.msg.error(`${file.name} file upload failed.`);
  34. }
  35. }
  36. }

Upload上传 - 图10

手动上传

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

  1. import { HttpClient, HttpRequest, HttpResponse } from '@angular/common/http';
  2. import { Component } from '@angular/core';
  3. import { NzMessageService } from 'ng-zorro-antd/message';
  4. import { UploadFile } from 'ng-zorro-antd/upload';
  5. import { filter } from 'rxjs/operators';
  6. @Component({
  7. selector: 'nz-demo-upload-upload-manually',
  8. template: `
  9. <nz-upload [(nzFileList)]="fileList" [nzBeforeUpload]="beforeUpload">
  10. <button nz-button><i nz-icon nzType="upload"></i>Select File</button>
  11. </nz-upload>
  12. <button
  13. nz-button
  14. [nzType]="'primary'"
  15. [nzLoading]="uploading"
  16. (click)="handleUpload()"
  17. [disabled]="fileList.length == 0"
  18. style="margin-top: 16px"
  19. >
  20. {{ uploading ? 'Uploading' : 'Start Upload' }}
  21. </button>
  22. `
  23. })
  24. export class NzDemoUploadUploadManuallyComponent {
  25. uploading = false;
  26. fileList: UploadFile[] = [];
  27. constructor(private http: HttpClient, private msg: NzMessageService) {}
  28. beforeUpload = (file: UploadFile): boolean => {
  29. this.fileList = this.fileList.concat(file);
  30. return false;
  31. };
  32. handleUpload(): void {
  33. const formData = new FormData();
  34. // tslint:disable-next-line:no-any
  35. this.fileList.forEach((file: any) => {
  36. formData.append('files[]', file);
  37. });
  38. this.uploading = true;
  39. // You can use any AJAX library you like
  40. const req = new HttpRequest('POST', 'https://www.mocky.io/v2/5cc8019d300000980a055e76', formData, {
  41. // reportProgress: true
  42. });
  43. this.http
  44. .request(req)
  45. .pipe(filter(e => e instanceof HttpResponse))
  46. .subscribe(
  47. () => {
  48. this.uploading = false;
  49. this.fileList = [];
  50. this.msg.success('upload successfully.');
  51. },
  52. () => {
  53. this.uploading = false;
  54. this.msg.error('upload failed.');
  55. }
  56. );
  57. }
  58. }

Upload上传 - 图11

自定义预览

自定义本地预览,用于处理非图片格式文件(例如视频文件)。

  1. import { HttpClient } from '@angular/common/http';
  2. import { Component } from '@angular/core';
  3. import { UploadFile } from 'ng-zorro-antd/upload';
  4. import { map } from 'rxjs/operators';
  5. @Component({
  6. selector: 'nz-demo-upload-preview-file',
  7. template: `
  8. <div class="clearfix">
  9. <nz-upload nzAction="https://www.mocky.io/v2/5cc8019d300000980a055e76" nzListType="picture" [nzPreviewFile]="previewFile">
  10. <button nz-button><i nz-icon nzType="upload"></i> Upload</button>
  11. </nz-upload>
  12. </div>
  13. `
  14. })
  15. export class NzDemoUploadPreviewFileComponent {
  16. constructor(private http: HttpClient) {}
  17. previewFile = (file: UploadFile) => {
  18. console.log('Your upload file:', file);
  19. return this.http
  20. .post(`https://next.json-generator.com/api/json/get/4ytyBoLK8`, {
  21. method: 'POST',
  22. body: file
  23. })
  24. .pipe(map((res: { thumbnail?: string }) => res.thumbnail));
  25. };
  26. }

Upload上传 - 图12

阿里云 OSS

使用阿里云 OSS 上传示例.

  1. import { Component } from '@angular/core';
  2. import { UploadChangeParam, UploadFile } from 'ng-zorro-antd/upload';
  3. @Component({
  4. selector: 'nz-demo-upload-upload-with-aliyun-oss',
  5. template: `
  6. <nz-upload
  7. nzName="file"
  8. [(nzFileList)]="files"
  9. [nzTransformFile]="transformFile"
  10. [nzData]="getExtraData"
  11. [nzAction]="mockOSSData.host"
  12. (nzChange)="onChange($event)"
  13. >
  14. Photos: <button nz-button><i nz-icon nzType="upload"></i> Click to Upload</button>
  15. </nz-upload>
  16. `
  17. })
  18. export class NzDemoUploadUploadWithAliyunOssComponent {
  19. files: UploadFile[] = [];
  20. mockOSSData = {
  21. dir: 'user-dir/',
  22. expire: '1577811661',
  23. host: '//www.mocky.io/v2/5cc8019d300000980a055e76',
  24. accessId: 'c2hhb2RhaG9uZw==',
  25. policy: 'eGl4aWhhaGFrdWt1ZGFkYQ==',
  26. signature: 'ZGFob25nc2hhbw=='
  27. };
  28. transformFile = (file: UploadFile) => {
  29. const suffix = file.name.slice(file.name.lastIndexOf('.'));
  30. const filename = Date.now() + suffix;
  31. file.url = this.mockOSSData.dir + filename;
  32. return file;
  33. };
  34. getExtraData = (file: UploadFile) => {
  35. const { accessId, policy, signature } = this.mockOSSData;
  36. return {
  37. key: file.url,
  38. OSSAccessKeyId: accessId,
  39. policy: policy,
  40. Signature: signature
  41. };
  42. };
  43. onChange(e: UploadChangeParam): void {
  44. console.log('Aliyun OSS:', e.fileList);
  45. }
  46. }

API

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

nz-uploadcomponent

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

nzChange

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

文件状态改变的回调,返回为:

  1. {
  2. file: { /* ... */ },
  3. fileList: [ /* ... */ ],
  4. event: { /* ... */ },
  5. }
  1. file 当前操作的文件对象。

    1. {
    2. uid: 'uid', // 文件唯一标识
    3. name: 'xx.png' // 文件名
    4. status: 'done', // 状态有:uploading done error removed
    5. response: '{"status": "success"}', // 服务端响应内容
    6. linkProps: '{"download": "image"}', // 下载链接额外的 HTML 属性
    7. }
  2. fileList 当前的文件列表。

  3. 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