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”。使用此

{{1}}

注意我已经使src等于data：image / png; base64，（你必须包含逗号）

Answer 2

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

FilePreviews.io

尝试获取文件预览缩略图以呈现

2 个答案: