Question

我一直在尝试使nzCustomRequest正常工作，以便我可以使用自己的API上传图像文件，该图像文件除了图像数据本身外还需要一些其他信息（原因是我无法使用{{1} }。无论我如何尝试，图像数据都永远不会转发到nzAction请求。

HTML：

POST

组件功能：

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

  }
}

如您在上面看到的，此请求正文中没有包含图像数据。

Stackblitz Demo

Upload Documentation

请帮助我弄清楚如何使用{"name":"file","file":{"uid":"srqapwtdma"},"withCredentials":false}

将图像数据包括在“ POST”请求中

Answer 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

Ant Design Angular-上传-nzCustomRequest没有随请求发送图像数据

1 个答案: