Select 多个文件与 refs 发生反应

Question

我正在尝试 select 多个文件做出反应，但我的尝试失败了我希望用户接下来能够 select 上传多个文件，但是当我尝试添加第二个文件时，我的代码只能获取一个文件，旧文件被新文件替换

我已经尝试将 multiple 属性添加到我的输入元素以及 accept="image/* 但它们都不起作用。目前我一直在尝试 multiple。这是我当前的代码

...

  handleFile(e){
        let images = this.imgRef.current.files
        console.log(Array.from(images))
}

...

 <input type="file" name="images" id="imgid" className="imgcls" ref={this.imgRef} onChange={this.handleFile} style={{ display: "none" }} multiple/>

我想记录每个文件信息，但这是我得到的

https://imgur.com/S2EwDLs

Answer 1

您不需要引用来访问文件。您可以根据更改时收到的事件来简单地完成此操作，如下所示：

class App extends Component {
  handleFile(e) {
    console.log(e.target.files)
  }

  render() {
    return (
      <div className="App">
        <input type="file" name="images" id="imgid" className="imgcls" onChange={this.handleFile} multiple/>
      </div>
    );
  }
}

Select 多个文件与 refs 发生反应

Select multiple files in react with refs

file

fileapi

reactjs