如何从post请求中获取响应

Question

我对web开发是个新手。我正在尝试实现一个post请求来发布数据接收响应。我正在使用ngx-uploader包。它有一个post方法来发布数据。但我不确定如何才能从服务器获得响应。如何发出POST请求以接收响应。请给我引路。

app.component.ts

startUpload(): void {
    const event: UploadInput = {
      type: 'uploadAll',
      url: this.url,
      method: 'POST',
      data: { foo: 'bar' },
    };

    this.uploadInput.emit(event);
  }

Answer 1

既然你使用"uploadAll“作为上传输入类型，那么我假设你有一个本地文件列表(例如。this.files = [])

所以在你的app.component.ts中，你可以将这个作为处理程序添加到你的文件上传中：

onUploadOutput(output: UploadOutput): void {
    switch (output.type) {
      case 'allAddedToQueue':
        // uncomment this if you want to auto upload files when added
        // const event: UploadInput = {
        //   type: 'uploadAll',
        //   url: '/upload',
        //   method: 'POST',
        //   data: { foo: 'bar' }
        // };
        // this.uploadInput.emit(event);
        break;
      case 'addedToQueue':
        if (typeof output.file !== 'undefined') {
          this.files.push(output.file);
        }
        break;
      case 'uploading':
        if (typeof output.file !== 'undefined') {
          // update current data in files array for uploading file
          const index = this.files.findIndex(file => typeof output.file !== 'undefined' && file.id === output.file.id);
          this.files[index] = output.file;
        }
        break;
      case 'removed':
        // remove file from array when removed
        this.files = this.files.filter((file: UploadFile) => file !== output.file);
        break;
      case 'dragOver':
        this.dragOver = true;
        break;
      case 'dragOut':
      case 'drop':
        this.dragOver = false;
        break;
      case 'done':
        // The file is downloaded
        this.files.forEach(file => {
          console.log(file.response);
        });
        break;
    }
  }

onUploadOutput处理文件上传的输出，正如你所看到的，在不同的情况下你可以处理，所以在你的问题上-你会想要在"done“的情况下处理它。并查看每个文件的响应。

您可以查看完整的工作示例here。

还要确保你的组件html正确地绑定了你的方法。如文档示例所示：

<div
  class="drop-container"
  ngFileDrop
  [options]="options"
  (uploadOutput)="onUploadOutput($event)"
  [uploadInput]="uploadInput"
  [ngClass]="{ 'is-drop-over': dragOver }"
>
  <h1>Drag &amp; Drop</h1>
</div>
 
<label class="upload-button">
  <input
    type="file"
    ngFileSelect
    [options]="options"
    (uploadOutput)="onUploadOutput($event)"
    [uploadInput]="uploadInput"
    multiple
  />
  or choose file(s)
</label>
 
<button type="button" class="start-upload-btn" (click)="startUpload()">
  Start Upload
</button>