选择多个文件与 refs 反应

Question

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

我尝试将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>
    );
  }
}