在React Js中上传之前显示多个图像

时间:2018-11-21 13:59:47

标签: reactjs jsx

我是React.js的新手,并且卡在了我的第一个应用程序中。

我正在尝试显示上传之前选择的多个图像。下面的代码仅显示一张图像。

class ImageUpload extends Component 
{
    constructor(props)
    {
        super(props);
        this.state={
        image:null,
        url:[]
    }
        this.handleChange=this.handleChange.bind(this);
}

    //select an image
    handleChange =(e) =>{
        if(e.target.files[0]){
                const image = Array.from(e.target.files);
                this.setState(() => ({image}));
                const len = image.length;
                    for(let i=0;i<len;i++)
                    {
                        this.setState({
                        url: URL.createObjectURL(e.target.files[i])})
                    }

         }
    }

render() { 
    return ( 
            <div>
                <input type="file" onChange={this.handleChange} required multiple={true}/>
                <button onClick={this.handleUpload}>Upload</button>
                <img  src={this.state.url} width="200" height="200" alt=""/>
            </div>
            );
        }
}

0 个答案:

没有答案