时间戳

首页 > 解决方案 > 选择多个文件与 refs 反应

reactjs - 选择多个文件与 refs 反应

问题描述

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

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

标签： reactjsfilefileapi

解决方案

您不需要 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>
    );
  }
}

推荐阅读