FineUploader UI显示文件选择缩略图,但不是拖放

时间:2017-05-19 18:34:29

标签: javascript reactjs amazon-s3 fine-uploader

在UI模式下使用React和FineUploader 5.14.2-rc1。上传效果很好,但显示的缩略图不一致。单击组件并从系统文件选择对话框中选择文件时,该文件由图像的缩略图表示。但是当我拖动同一个文件并将其放在组件上时,它会显示一个通用文件图标而不是图像缩略图。我假设这是一个配置问题,但我在文档中找不到任何密切关系。这是相关的组成部分:

import FineUploaderS3 from 'fine-uploader-wrappers/s3'
import Gallery from 'react-fine-uploader'

export default class FileUploader extends React.Component {

    constructor(props){
        super(props)

        this.state = {
            showModal: props.showModal || false,
            fileName: props.fileName,
            s3Key: props.s3Key,
            title: props.title,
            description: props.description,
            fileUrl: props.fileUrl,
            success: props.success || true,
        }

        let uploaderInstance = null

        this.uploader = () =>{
            uploaderInstance = new FineUploaderS3({
                options: {
                    chunking: {
                        enabled: true 
                    },
                    resume: {
                        enabled: true 
                    },
                    request: {
                        endpoint: 'http://ourbucketurl',
                        accessKey: ourAccessKeyId,
                    },
                    signature: {
                        endpoint: '/api/s3handler', 
                    },
                    uploadSuccess: {
                        endpoint: '/api/s3uploadsuccess', 
                    },
                    callbacks: {
                        onComplete: this.uploadCompleteHandler
                    },
                }
            })

            return uploaderInstance
        }

        this.uploadCompleteHandler = (id, name, responseJSON) => {
            this.setState({showModal: responseJSON.success,
                s3Key: responseJSON.key,
                fileName: responseJSON.name,
                fileUrl: `https://ourbucketurl/${responseJSON.key}`})
        }

    render() {

        return <div>
            <Gallery uploader={this.uploader()} />
        </div>
    }
}

我可以把这个组件放在任何地方,文件上传时不会发生任何事故。

无论浏览器如何,都会出现问题。无论用户如何调用上传操作,我需要做什么才能始终如一地显示缩略图?

1 个答案:

答案 0 :(得分:1)

我自己也遇到了这个问题,降级为反应精细上传器0.6.0并且所有工作都重新开始。