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

您不需要引用来访问文件。您可以从更改后收到的事件中简化操作，如下所示：

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

选择多个文件以与引用反应

1 个答案: