Question

我已经使用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>
  );
},
});

Answer 1

问题出在showFiles方法中。

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

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

我设法通过这样做来解决问题

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

React dropzone图像未显示在模板上

1 个答案: