React dropzone图像未显示在模板上
React dropzone image not shown on template
我使用了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;
相关文章:
- 从桌面读取python文件时高亮显示代码
- 使用JS如何动态更改显示的html文件中的文本背景颜色
- 如何在生成下载文件时显示加载动画
- React重新渲染但未显示正确的组件
- nodejs-expressjs上传图像并显示它们
- 使用JSP从服务器检索和显示图像
- 音频控件在mouseover上显示,在mouseout上淡出
- 让文本输入幻灯片显示输入时的新文本输入?然后向后滑动
- 使用电话间隙在Android应用程序中显示SQL Lite的数据
- 显示5秒后隐藏潜水
- 画廊图像未显示
- 不显示带有本地json文件数据的谷歌地图脚本
- 如何将json数据显示为html
- 使用dropzone上传文件后显示成功消息
- 如何在Angularjs中使用Dropzone显示已经存储在服务器上的文件
- React dropzone图像未显示在模板上
- 如何在removedfile"前显示确认信息事件在dropzone中引发
- 如何在dropzone.js中显示上传进度百分比
- DropZone 在 AJAX 调用后不显示表单
- 不能得到Dropzone.js工作?文件总是显示红色的x