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: `
<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(
(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
});