试图获取要呈现的文件预览缩略图

Question

只是想获取要使用 onDrop() 渲染的预览缩略图。我在几个网站上看到过，您在其中放置一个文档，它会显示第一页的缩略图。我要么得到损坏的 link 图片，要么根本没有图片。

这是我用作参考的内容，尽管官方文档没有太大帮助：

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

Answer 1

那是因为返回的数据是 base64 编码字符串，而不是本地存储位置的 "url"。使用这个

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

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

Answer 2

原来我需要像这样的服务来完成我想要完成的事情：

FilePreviews.io

试图获取要呈现的文件预览缩略图

Trying to get file preview thumbnail to render

reactjs

react-redux

react-dropzone