Ant Design Angular-Upload-nzCustomRequest不随请求发送图像数据

Question

我一直在尝试让nzCustomRequest工作，这样我就可以用我的API上传图像文件，该文件需要一些除图像数据本身之外的其他信息(原因是我无法使用nzAction(。无论我如何尝试，图像数据都不会被转发到POST请求。

HTML:

<nz-upload
[nzCustomRequest]="handleUpload"
nzListType="picture-card"
[(nzFileList)]="fileList"
[nzShowButton]="fileList.length < 3"
[nzPreview]="handlePreview">
<i class="anticon anticon-plus"></i>
<div class="ant-upload-text">Upload</div>
</nz-upload>

组件功能：

handleUpload = (item: any) => {
console.log('uploading image...');
console.log(item);
this.http.post('https://jsonplaceholder.typicode.com/posts/', {item})
.subscribe(res => console.log(res));
}
}

请求有效载荷：

{"name":"file","file":{"uid":"srqapwtdma"},"withCredentials":false}

正如您在上面看到的，在这个请求体中没有包含任何图像数据。

Stacklitz演示

上传文档

请帮我弄清楚如何使用nzCustomRequest在"POST"请求中包含图像数据

Answer 1

跟踪文档：

handleUpload = (item: any) => {
const formData = new FormData();
formData.append(item.name, item.file as any);
this.http.post('https://jsonplaceholder.typicode.com/posts/', formData).subscribe(
res => {
console.log("success", res.id);
item.onSuccess(item.file);
},
(err) => {
item.onError(err, item.file);
}
);
} 
}

这是演示