阵营：文件预览PFD / DOCX / XLS / JPG

Question

如何显示使用React.js或网络PFD / DOCX / XLS / JPG文件的文件预览？

这个问题以前有人问，但没有人回答，所以我试图得到更多的关注：React File Preview (FIREBASE)

File preview for web

有人请回答。

Answer 1

您可以通过使用FileReader类加载任何图像（不是PDF / DOCX虽然）的预览。

这个类将加载一个预览和当其完成后，在这里你可以设置你的组件的状态执行的回调。

工作示例：

class PicturePreview extends React.Component {
    constructor(props) {
        super(props)

        this.state = {
            preview: ''
        }
    }

    fileUploaded = ev => {
        const reader = new FileReader()
        reader.readAsDataURL(ev.target.files[0])
        reader.onloadend = ev => {
            this.setState({ preview: reader.result })
        }
    }

    render() {
        const { preview } = this.state

        return (
            <div>
                <input type='file' onChange={this.fileUploaded} />
                {preview && <img className='previewFile' src={preview} alt='preview' />}
            </div >
        )
    }
}

ReactDOM.render(<PicturePreview/>, document.getElementById('root'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.5.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.5.2/umd/react-dom.production.min.js"></script>
<div id='root'>