选择与refs作对的多个文件

Question

我试图选择多个文件与反应但我的尝试失败我希望用户能够选择多个文件下次上传但我的代码只能获得一个文件，当我尝试添加第二个文件，旧文件被替换为新文件

我试图将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

您不需要refs来访问文件。您可以通过更改收到的事件轻松完成，如下所示：

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>
    );
  }
}