javascript - Cómo hacer que el nzAction llame a una API real en Angular
Aquí está el código:
HTML :
<nz-upload class="avatar-uploader" nzType="drag" nzName="avatar" nzListType="picture-card"
nzAction="https://jsonplaceholder.typicode.com/posts/" [nzShowUploadList]="false"
[nzBeforeUpload]="beforeUpload" (nzChange)="uploadHandleChange($event)">
<ng-container *ngIf="!avatarUrl">
<p class="ant-upload-drag-icon">
<i nz-icon [nzType]="loading ? 'loading' : 'inbox'"></i>
</p>
<div class="ant-upload-text">
<b>Choose a file</b>
or drag it here to upload.
</div>
</ng-container>
<img *ngIf="avatarUrl" [src]="avatarUrl" class="avatar" />
</nz-upload>
TS :
beforeUpload = (file: File) => {
return new Observable((observer: Observer<boolean>) => {
const imageType = ['image/jpeg', 'image/jpg', 'image/png', 'image/gif'].includes(file.type);
// console.log(imageType);
// if ()
observer.next(imageType)
observer.complete();
console.log(imageType)
});
}
getBase64(img: File, callback: (img: string) => void): void {
const reader = new FileReader();
reader.addEventListener('load', () => callback(reader.result!.toString()));
reader.readAsDataURL(img);
}
uploadHandleChange(info: { file: UploadFile }): void {
switch (info.file.status) {
case 'uploading':
this.loading = true;
break;
case 'done':
// Get this url from response in real world.
this.getBase64(info.file!.originFileObj!, (img: string) => {
this.loading = false;
this.avatarUrl = img;
});
break;
case 'error':
console.log('Network error');
this.loading = false;
break;
}
}
El problema aquí es que cuando intento subir una foto, el error es "http://newbie-test.com:8093/apihttps://jsonplaceholder.typicode.com/posts/"
Pero cuando quito el nzAction, cuando intento subirlo no funciona.