Caricamento file angular

Sono principiante per l’Angolare, voglio sapere come creare parte caricamento upload Angular-5 File , cerco di trovare qualsiasi tutorial o doc, ma non vedo nulla da nessuna parte, nessuna idea per questo? e sto provando a quei file ng4 ma non funziona per Angular-5

Ecco un esempio funzionante per il caricamento di file in API:

Passaggio 1: modello HTML (file-upload.component.html)

Definire un semplice tag di input di tipo file . Aggiungi una funzione a (change) -event per la gestione dei file di scelta.

 

Passaggio 2: caricamento della gestione in TypeScript (file-upload.component.ts)

Definire una variabile predefinita per il file selezionato.

 fileToUpload: File = null; 

Crea la funzione che usi in (change) -event del tuo tag di input del file:

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

Se si desidera gestire la selezione multifile, è ansible scorrere questa matrice di file.

Ora crea la funzione di caricamento file chiamando il file upload.service:

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

Passaggio 3: servizio di caricamento file (file-upload.service.ts)

Caricando un file tramite il metodo POST, è necessario utilizzare FormData , in modo da poter aggiungere file alla richiesta http.

 postFile(fileToUpload: File): Observable { 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)); } 

Quindi, questo è un esempio di lavoro molto semplice, che uso ogni giorno nel mio lavoro.

Il metodo molto semplice e veloce sta usando ng2-file-upload .

Installa ng2-file-upload tramite npm.

Al primo modulo di importazione nel tuo modulo.

 import { FileUploadModule } from 'ng2-file-upload'; Add it to [imports] under @NgModule: imports: [ ... FileUploadModule, ... ] 

markup:

  

Nel tuo ruolo t:

 import { FileUploader } from 'ng2-file-upload'; ... uploader: FileUploader = new FileUploader({ url: "api/your_upload", removeAfterUpload: false, autoUpload: true }); 

È l’uso più semplice di questo. Per sapere tutto il potere di questo vedere la demo

Prova questo

Installare

 npm install primeng --save 

Importare

 import {FileUploadModule} from 'primeng/primeng'; 

html