Ant Design Angular - 上传 - nzCustomRequest 不随请求发送图像数据答案

【问题标题】：Ant Design Angular - Upload - nzCustomRequest no sending image data with the requestAnt Design Angular - 上传 - nzCustomRequest 不随请求发送图像数据
【发布时间】：2018-12-30 02:01:05
【问题描述】：

我一直在尝试让 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}

如上所示，此请求正文中没有包含图像数据。

Stackblitz Demo

Upload Documentation

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

【问题讨论】：

标签： angular antd

【解决方案1】：

关注Docs：

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);
      }
    );
  } 
}

这是DEMO

【讨论】：