使用ngZorro中Upload自定义上传时XMLHttpRequest问题解决方法

使用ngZorro中Upload自定义上传时XMLHttpRequest问题解决方法


使用angular框架写前端的用户一般都比较喜欢用ngZorro,本人最近在使用ngZorro中的Upload自定义文件组件(链接: ngZorro自定义上传)上传时遇到如下问题。
问题描述:

该组件实例代码

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

@Component({
  selector: 'nz-demo-upload-custom-request',
  template: `
    
      
    
  `
})
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(
      (event: HttpEvent<{}>) => {
        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!);
      }
    );
  };

解决方法:
将withCredentials的值由true改为false。

 const req = new HttpRequest('POST', item.action!, formData, {
      reportProgress: true,
      withCredentials: false
    });

你可能感兴趣的:(angular前端,ngZorro上传组件)