Envio Angular De Ficheiros

Aqui está um exemplo de trabalho para o envio de ficheiros para a api:

Passo 1: Modelo HTML (ficheiro-enviar.componente.html)

Defina a marca de entrada simples do tipo file. Adicione uma função a (change) - evento para lidar com a escolha dos ficheiros.

<div class="form-group">
    <label for="file">Choose File</label>
    <input type="file"
           id="file"
           (change)="handleFileInput($event.target.files)">
</div>

Passo 2: Processamento do envio em Script (envio de ficheiros.componente.ts)

Define uma variável predefinida para o ficheiro seleccionado.

fileToUpload: File = null;

Crie uma função que use em (change) - evento da entrada do seu ficheiro marca:

handleFileInput(files: FileList) {
    this.fileToUpload = files.item(0);
}

Se quiser lidar com a selecção multifila, então pode iterar através deste conjunto de ficheiros.

uploadFileToActivity() {
    this.fileUploadService.postFile(this.fileToUpload).subscribe(data => {
      // do something, if upload success
      }, error => {
        console.log(error);
      });
  }

Passo 3: Serviço de envio de Ficheiros (ficheiro-envio.servico.ts)

Ao enviar um ficheiro através do método POST-method deverá usar FormData, Porque assim poderá adicionar um ficheiro ao pedido http.

postFile(fileToUpload: File): Observable<boolean> {
    const endpoint = 'your-destination-url';
    const formData: FormData = new FormData();
    formData.append('fileKey', fileToUpload, fileToUpload.name);
    return this.httpClient
      .post(endpoint, formData, { headers: yourHeadersConfig })
      .map(() => { return true; })
      .catch((e) => this.handleError(e));
}