只是想获得一个预览缩略图图像来渲染onDrop()。我在几个网站上看到了一些你放置文档的网站，它显示了第一页的缩略图。我要么得到一个损坏的链接图像，要么根本没有图像。
这是我用作参考的内容，尽管官方文档并没有太大帮助：
https://react-dropzone.js.org/
https://medium.com/technoetics/handling-file-upload-in-reactjs-b9b95068f6b
这是我目前正在使用的代码。这不会呈现缩略图，但“提交”和“取消”按钮会向下移动，就像那里有东西一样，但我什么也没看到。
import _ from 'lodash';
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { submitDocument } from '../../actions/documents';
import Dropzone from 'react-dropzone';
class SubmitDocuments extends Component {
constructor() {
super();
this.state = {
filesToBeSent: [],
filesPreview: [],
}
this.handleClick = this.handleClick.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
this.onDrop = this.onDrop.bind(this);
}
handleClick(event) {
this.setState({
filesToBeSent: [],
filesPreview: [],
});
}
handleSubmit(event) {
event.preventDefault();
this.props.submitDocument(this.state.filesToBeSent);
}
onDrop(acceptedFiles) {
console.log(acceptedFiles);
var filesToBeSent = this.state.filesToBeSent;
_.map(acceptedFiles, f => {
filesToBeSent.unshift(f);
});
filesToBeSent = _.uniqBy(filesToBeSent, 'name');
var filesPreview = [];
_.map(filesToBeSent, i => {
filesPreview.unshift(
<div key={i.name}>
{/*<h5>{i.name} - {i.size} bytes</h5>*/}
<img src={window.URL.revokeObjectURL(i.preview)} />
</div>
)
});
this.setState({
filesToBeSent,
filesPreview
});
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<div className='panel panel-default'>
<div className='panel-heading'>
<h4><strong>Submit Documents</strong></h4>
</div>
<div className='panel-body'>
<Dropzone className='dropzone' onDrop={this.onDrop}>
<h3>Click to add files or drag files here to upload</h3>
</Dropzone>
{this.state.filesPreview}
<button type='submit' disabled={this.state.filesPreview.length < 1} className='btn btn-primary'>Submit</button>
<button type='button' className='btn btn-danger' onClick={this.handleClick}>Cancel</button>
</div>
</div>
</form>
);
}
}
function mapStateToProps(state) {
return {
survey_id: state.documents.survey_id
}
}
export default connect(mapStateToProps, { submitDocument })(SubmitDocuments);
现在更改为以下导致损坏的图像图标：
<img src={i.preview} />
事情正在上传。
我在这里做错了什么？我觉得我的解释preview可能与文档的含义不同，或者它仅适用于图像文件，而我的应该适用于.pdf, .xlsx., .txt.
编辑
这就是它的console.log(filesToBeSent)样子。
这是i之后的样子lodash _.map(filesToBeSent, i => {}。
