Upload上传

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

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

    点击上传

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

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

    Upload上传 - 图4

    已上传的文件列表

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

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

    完全控制的上传列表

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

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

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

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

    Upload上传 - 图6

    文件夹上传

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

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

    图片列表样式

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

    上传前转换文件

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

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

    Upload上传 - 图9

    用户头像

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

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

    照片墙

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

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

    Upload上传 - 图11

    拖拽上传

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

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

    手动上传

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

    Upload上传 - 图13

    自定义预览

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

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

    阿里云 OSS

    使用阿里云 OSS 上传示例.

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

    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

    nzCustomRequest 回调传递以下参数：

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