Iteration über FileList, React, Typescript

Question

Ich "reactife" eine Dateieingabe und kann nicht über ausgewählte Dateien iterieren.

private onInputChanged = (e: React.FormEvent<HTMLInputElement>): void => { 
 
    let files: FileList | null = e.currentTarget.files; 
 
    files.map(file => console.log("Do something with " + file.name)); 
 
}

<input 
 
    type="file" 
 
    onChange={this.onInputChanged} 
 
/>

Hier ist ein Barebone Beispiel für mein Problem. Dateiliste kann nicht mit .map (... und weder .forEach (...

verwendet werden Wie kann ich eine Iteration auf ausgewählte Dateien

Fehler erreichen: Property ‚Karte‘ existiert nicht auf Typ ‚Filelist '

Answer 1

FileList ist ein arrayähnliches Objekt, das die length -Eigenschaft und indizierte Werte aufweist, aber keine Array-Methoden wie map. Mit ES6 können Sie spread, Array # from verwenden, um es in ein reales Array umzuwandeln. In ES5 können Sie Array # slice aufrufen, um in ein Array zu konvertieren, oder die Methode direkt aufrufen.

Hinweis: Array-Nr. Verursacht den TypeScript | Array.von | Fehler TS2339: Eigenschaft ‚von‘ existiert nicht auf Typen Fehler ‚ArrayConstructor‘, die Standardeinstellung ändern Ziel (ES3) zu ES6 - "target": "ES6" - im compiler options des „tsconfig.json“ oder verwenden - Ziel ES6 in der Befehlszeile.

Array.from Demo:

const onInputChanged = (e) => { 
 
    const files = e.currentTarget.files; 
 
    
 
    Array.from(files).forEach(file => console.log("Do something with " + file.name)); 
 
}

<input 
 
    type="file" 
 
    onChange="onInputChanged(event)" 
 
/>

Aufruf forEach Demo:

const onInputChanged = (e) => { 
 
    const files = e.currentTarget.files; 
 
    
 
    [].forEach.call(files, file => console.log("Do something with " + file.name)); 
 
}

<input 
 
    type="file" 
 
    onChange="onInputChanged(event)" 
 
/>

Answer 2

die FileList Schnittstelle wird mit dem Index zugegriffen.

for (let i = 0; i < files.length; i++) { 
    console.log(files[0].name); 
    //or 
    console.log(files.item(i).name); 
} 

Sie können entweder den Index mit [0] oder über item(0)