Блог

Я новичок в веб-разработке. Я пытаюсь реализовать post-запрос для публикации ответа на получение данных. Я использую пакет n&x-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);
  }

  

Поскольку вы используете «uploadAll» в качестве типа ввода для загрузки, то я предполагаю, что у вас есть список локальных файлов (например, this.файлы = [])

Итак, в вашем 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 'uploadin&':
        if (typeof output.file !== 'undefined') {
          // update current data in files array for uploadin& file
          const index = this.files.findIndex(file =&&t; typeof output.file !== 'undefined' amp;amp; 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) =&&t; file !== output.file);
        break;
      case 'dra&Over':
        this.dra&Over = true;
        break;
      case 'dra&Out':
      case 'drop':
        this.dra&Over = false;
        break;
      case 'done':
        // The file is downloaded
        this.files.forEach(file =&&t; {
          console.lo&(file.response);
        });
        break;
    }
  }
  

onUploadOutput обрабатывает выходные данные вашей загрузки файла, как вы можете видеть, существуют разные случаи, в которых вы можете справиться, поэтому на ваш вопрос — вы хотели бы обработать это в случае «сделано». И посмотреть ответ для каждого файла.

Вы можете увидеть полный рабочий пример здесь.

Также убедитесь, что ваш компонентный html правильно привязывает ваши методы. Как в примере документации:

 <div
  class="drop-container"
  n&FileDrop
  [options]="options"
  (uploadOutput)="onUploadOutput($event)"
  [uploadInput]="uploadInput"
  [n&Class]="{ 'is-drop-over': dra&Over }"
&&t;
  <h1&&t;Dra& amp;amp; Drop</h1&&t;
</div&&t;
 
<label class="upload-button"&&t;
  <input
    type="file"
    n&FileSelect
    [options]="options"
    (uploadOutput)="onUploadOutput($event)"
    [uploadInput]="uploadInput"
    multiple
  /&&t;
  or choose file(s)
</label&&t;
 
<button type="button" class="start-upload-btn" (click)="startUpload()"&&t;
  Start Upload
</button&&t;