Angular 2 - Datei-Upload-Zugriff

Question

<div class="fileUpload btn btn-primary"> 
    <span>Choose File</span> 
    <input id="uploadBtn" type="file" class="upload" value="No File Selected" #uploadBtn/> 
</div> 
<input id="uploadFile" placeholder="No File Chosen" disabled="disabled" value="{{uploadBtn.value}}"/> 

Wie kann ich auf die Datei zugreifen, die vom Benutzer hochgeladen wurde? Wie mache ich das in Winkel- und Typoskript, da ich die Daten in der Datei noch verarbeiten muss (z. B. nach gültigen Dateitypen suchen)?

Answer 1

Fast genauso, wie Sie es in JavaScript tun würden.

Wenn das obige Ihre Vorlage für eine Komponente mit dem Namen FileUploadComponent ist, können Sie so etwas tun. Beachten Sie, dass dies HTML5 ist. So ist Browser-Unterstützung von IE10.

@Component({ 
    selector: 'file-upload', 
    template: ` 
     ... 
     <input type="file" class="upload" (change)="_onChange($event.target.files)"> 
     ...` 
}) 
export class FileUploadComponent { 

    private _onChange(files: FileList) : void { 
     if(files && files.length > 0) { 
       let file : File = files.item(0); 
       //Now you can get 
       console.log(file.name); 
       console.log(file.size); 
       console.log(file.type); 
     } 
    } 

} 

Sie können diese Funktionalität erweitern, um die Datei mit der FileReader zu laden.

Wenn Sie zum Beispiel möchten Sie eine csv Datei lesen:

Starten von mit dem file:

let reader: FileReader = new FileReader(); 

reader.onload = (e) => { 
    let csv: string = reader.result; 
    console.log(csv); 
    //From here you can either use a csv parse library, or your own 
    //implementation if you know what the structure of the csv is 
} 

reader.readAsText(file);