angualr 上传文件

一、代码信息

https://ng.ant.design/version/8.5.x/components/upload/zh

这边选择自定义选择，样式代码如下

import { HttpClient, HttpEvent, HttpEventType, HttpRequest, HttpResponse } from '@angular/common/http';
import { Component } from '@angular/core';
import { UploadXHRArgs } from 'ng-zorro-antd/upload';
import { forkJoin } from 'rxjs';

@Component({
  selector: 'nz-demo-upload-custom-request',
  template: `
    <nz-upload nzAction="https://jsonplaceholder.typicode.com/posts/" [nzCustomRequest]="customReq">
      <button nz-button><i nz-icon nzType="upload"></i><span>Click to Upload</span></button>
    </nz-upload>
  `
})
export class NzDemoUploadCustomRequestComponent {
  constructor(private http: HttpClient) {}

  customReq = (item: UploadXHRArgs) => {
    // Create a FormData here to store files and other parameters.
    const formData = new FormData();
    // tslint:disable-next-line:no-any
    formData.append('file', item.file as any);
    formData.append('id', '1000');
    const req = new HttpRequest('POST', item.action!, formData, {
      reportProgress: true,
      withCredentials: true
    });
    // Always returns a `Subscription` object. nz-upload would automatically unsubscribe it at correct time.
    return this.http.request(req).subscribe(
      // tslint:disable-next-line no-any
      (event: HttpEvent<any>) => {
        if (event.type === HttpEventType.UploadProgress) {
          if (event.total! > 0) {
            // tslint:disable-next-line:no-any
            (event as any).percent = (event.loaded / event.total!) * 100;
          }
          item.onProgress!(event, item.file!);
        } else if (event instanceof HttpResponse) {
          item.onSuccess!(event.body, item.file!, event);
        }
      },
      err => {
        item.onError!(err, item.file!);
      }
    );
  };

  // A simple sliced upload.
  customBigReq = (item: UploadXHRArgs) => {
    const size = item.file.size;
    const chunkSize = parseInt(size / 3 + '', 10);
    const maxChunk = Math.ceil(size / chunkSize);
    const reqs = Array(maxChunk)
      .fill(0)
      .map((_: {}, index: number) => {
        const start = index * chunkSize;
        let end = start + chunkSize;
        if (size - end < 0) {
          end = size;
        }
        const formData = new FormData();
        formData.append('file', item.file.slice(start, end));
        formData.append('start', start.toString());
        formData.append('end', end.toString());
        formData.append('index', index.toString());
        const req = new HttpRequest('POST', item.action!, formData, {
          withCredentials: true
        });
        return this.http.request(req);
      });
    return forkJoin(...reqs).subscribe(
      () => {
        item.onSuccess!({}, item.file!, event);
      },
      err => {
        item.onError!(err, item.file!);
      }
    );
  };
}

二、集成项目

// nzShowUploadList 不显示进度条与上传的文件信息
  <nz-upload nzAction="/shellData/importShellData" [nzShowUploadList]=false [nzCustomRequest]="uploadFile">
    <button nz-button><i nz-icon nzType="upload"></i><span>上传文件</span></button>
  </nz-upload>

uploadFile = (item: UploadXHRArgs) => {
    const formData = new FormData();
    formData.append('file', item.file as any);
    formData.append('type', '10');
    const req = new HttpRequest('POST', item.action!, formData, {
      reportProgress: true,
      // withCredentials: true
    });
    return this.httpClient.request(req).subscribe(
      (event: HttpEvent<any>) => {
        if (event.type === HttpEventType.UploadProgress) {
          // 上传进度大小
          console.log(event.loaded);
          // 上传文件的大小
          console.log(event.total);
          if (event.total! > 0) {
            (event as any).percent = (event.loaded / event.total!) * 100;
          }
          item.onProgress!(event, item.file!);
        } else if (event instanceof HttpResponse) {
          item.onSuccess!(event.body, item.file!, event);
        }
      },
      err => {
        console.log(err);
      }
    );
  };

如果nzShowUploadList设置为true或者不设置的话，则进度与图片信息显示在上传按钮的下发。如下所示：

三、自定义进度样式

如上代码所示：第一个是进度，第二个是成功。

所以我们可以获取到文件大小与进度大小，然后进行进度条的样式渲染。如下

<nz-progress [nzPercent]="uploadPercent" *ngIf="uploadShow"></nz-progress>

 

 

 

 

 

 

 

 

 

 

问题汇总

使用官方样例，一直提示跨域

解决方法：注释掉一个即可