试图让文件预览缩略图渲染

Question

只是想用onDrop() 来渲染预览缩略图。我在几个网站上看到了一些你放置文档的网站，它显示了第一页的缩略图。我要么得到一个损坏的链接图像，要么根本没有图像。

这是我作为参考使用的，虽然官方文档并没有太大帮助：

https://react-dropzone.js.org/

React-Dropzone image preview not showing

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 => {} 之后的样子。

Answer 1

这是因为数据以 base64 编码字符串的形式返回，而不是其本地存储位置的“url”。使用这个

<img alt="Embedded Image" src={`data:image/png;base64,${i.preview}`} />

请注意，我已将 src 设为 data:image/png;base64，（必须包含逗号）

Answer 2

事实证明，我需要这样的服务来完成我想要完成的事情：

FilePreviews.io