Question

我＆＃39; m＆＃34;重新＆＃34;文件输入，无法设法迭代选定的文件。

＆＃13;

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

＆＃13;

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

＆＃13;

以下是我的问题的准系统示例。 FileList不能与.map（...和.forEach（...

）一起使用

如何完成所选文件的迭代？

错误：属性＆＃39; map＆＃39;在＆＃39; FileList＆＃39;

类型中不存在

Answer 1

FileList是一个类似于Array的对象，具有length属性和索引值，但它缺少Array方法，例如map。使用ES6，您可以使用spread或Array#from将其转换为真实数组。在ES5中，您可以调用Array#slice转换为数组，或call文件列表上的方法。

注意：如果Array＃from导致 TypeScript | Array.from |错误TS2339：类型'ArrayConstructor'错误中不存在属性'from'，将默认目标（es3）更改为ES6 - "target": "ES6" - {{3} “tsconfig.json”，或在命令行中使用--target ES6。

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)"
/>

致电每个演示：

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

使用索引访问FileList接口：

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

您可以将索引与[0]或item(0)一起使用。

Answer 3

你可以只迭代 FileList：

for (let file of files) {
    console.log("Do something with " + file.name)
}

迭代FileList，React，Typescript

3 个答案: