React dropzone图像未显示在模板上

React dropzone image not shown on template

本文关键字:显示 dropzone 图像 React      更新时间:2023-09-26

我使用了react dropzone组件来上传多个图像,但我的模板上没有显示图像预览。文件显示在控制台上。我哪里做错了?我从这里开始使用这个组件https://github.com/okonet/react-dropzone。让我知道我还需要提供什么来检查这个问题。感谢您提前提供帮助。我们将感谢您的帮助。

代码是

var Gallery = React.createClass({
    getInitialState: function () {
    return {
     files:[]
    };
},
onDrop(files) {
    console.log('Received files: ', files);
    this.setState({
        files: files
    });
},
showFiles() {
    var files = this.state;
    console.log('files',files);
    if (!files.length) {
        return null;
    }
    return (
        <div>
            <h3>Dropped files: </h3>
            <ul className="col-md-4">
                {
                    files.map((file, idx) => {
                        return (
                            <li key={idx}>
                                <img src={file.preview} width={100}/>
                                <div>{file.name + ' : ' + file.size + ' bytes.'}</div>
                            </li>
                        );
                    })
                }
            </ul>
        </div>
    );
},
render: function () {
  return (
       <div>
            <div className="col-md-12">
              <Dropzone onDrop={this.onDrop}>
                Try dropping some files here, or click to select files to upload.
            </Dropzone>
            {this.showFiles()}
            </div>
            <div className="row">
                <button className="btn" onClick={this.submit}>Next</button>
            </div>
      </div>
  );
},
});

问题出在showFiles方法中。

var files = this.state;
//const {files}=this.state

您不将文件分配给文件var,而是将整个状态分配给它。

我通过做这个设法解决了这个问题

var files = this.state.files || null;