Ant Design Angular - Загрузить - nzCustomRequest не отправляет данные изображения с запросом

Я пытался заставить 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

Загрузить документацию

Пожалуйста, помогите мне понять, как я могу включить данные изображения в свой запрос POST, используя nzCustomRequest


angular antd
person Nehal    schedule 22.07.2018    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Следуя Документам:

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

Вот ДЕМО

person Dumitru Chirutac    schedule 19.01.2019