reactjs - react-dropzone 预览属性丢失
问题描述
几乎尝试了所有方法,但无法正常工作?谁能指出我错过了什么?另外,我查看了其他堆栈溢出帖子,似乎没有什么对我有用。
不知道为什么缺少 file.preview,但它似乎对其他人来说效果很好。是因为使用了组件模型吗?我应该使用功能组件吗?
constructor() {
super();
this.onDrop = (files) => {
console.log(files)
this.setState({ files })
};
this.state = {
files: []
};
}
renderPreviewImg(files) {
console.log(files)
const img = {
display: 'block',
width: 'auto',
height: '100%'
};
const thumb = {
display: 'inline-flex',
borderRadius: 2,
border: '1px solid #eaeaea',
marginBottom: 8,
marginRight: 8,
width: 100,
height: 100,
padding: 4,
boxSizing: 'border-box'
};
const thumbInner = {
display: 'flex',
minWidth: 0,
overflow: 'hidden'
};
const thumbs = files.map(file => (
<div style={thumb} key={file.name}>
<div style={thumbInner}>
<img
src={file.preview}
style={img}
alt="review"
/>
</div>
</div>
));
return thumbs;
}
<Dropzone
onDrop={this.onDrop}
>
{({ getRootProps, getInputProps }) => (
<section className="container">
<div {...getRootProps({ className: 'dropzone' })}>
<input {...getInputProps()} />
<p>Drag 'n' drop some files here, or click to select files</p>
</div>
<aside style={thumbsContainer}>
{this.renderPreviewImg(this.state.files)}
</aside>
</section>
)}
</Dropzone>
解决方案
你可以使用这个方法
<img src={URL.createObjectURL(file[0])} />
如果您有多个文件,则遍历文件并为每个文件返回上述语句。
<Dropzone
onDrop={this.onDrop}
>
{({ getRootProps, getInputProps }) => (
<section className="container">
<div {...getRootProps({ className: 'dropzone' })}>
<input {...getInputProps()} />
<p>Drag 'n' drop some files here, or click to select files</p>
</div>
<aside style={thumbsContainer}>
{this.state.files.map(file=>{
return <img src={URL.createObjectURL(file[0])} />
})}
</aside>
</section>
)}
</Dropzone>
推荐阅读
- jquery - 根据第一个和第二个菜单选择填充第三个下拉菜单
- python - python, 练习, for 循环
- android - 如何在颤动中显示本机视图?
- javascript - JavaScript:“$”不是函数错误
- html - aria- describeby - 两个字段的描述相同?
- android - 预期 BEGIN_OBJECT 但在 Kotlin 中使用 Gson 是 BEGIN_ARRAY”
- python - 将十六进制编码的 GZIP 字符串转换回未压缩的字符串
- pandas - 为什么 set_index 中没有 prepend 参数?
- javascript - chrome 扩展命令传递给内容脚本
- android - ValueEventListener 在 .runTransaction() 之后的一秒钟内返回具有空值的快照