reactjs如何从表单输入多个文件

Question

我有一个组件，如：

class Media extends Component {

    render() {
        return (

                    <form className="uploader" encType="multipart/form-data">
                        <input type="file" id="file" />
                    </form>

        )
    }
}

export default Media

在这里我想上传多个file. 在HTML我们能做到像

<input type="file" name="img" multiple>

我怎么能multiple有价值reactjs？先感谢您

更新

class Media extends React.Component {

    handleChange(e) {
    console.log(e.target.value)
  }

    render() {
        return (

                    <form className="uploader" encType="multipart/form-data">
                        <input type="file" id="file" multiple onChange={this.handleChange.bind(this)}/>
                    </form>

        )
    }
}

ReactDOM.render(
  <Media />,
  document.getElementById('container')
);

在这里，如果我上传图像并且更改了值，我只会得到第一个图像 如何获取所有上传的图像？

Answer 1

你可以在 React. 中做同样的事情，你可以找到attributes你可以使用的here

class Media extends React.Component {
  render() {
    return (
      <form
        className="uploader"
        encType="multipart/form-data"
      >
        <input type="file" id="file" multiple />
      </form>
    )
  }
}  

ReactDOM.render(
  <Media /> ,
  document.getElementById('container')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="container"></div>