React：PFD/docx/xls/jpg 的文件预览

Question

如何使用 React.js 或 web 显示 PFD/docx/xls/jpg 文件的文件预览？

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

File preview for web

请有人回答。

Answer 1

您可以使用 FileReader 班级。

此类将加载预览并在完成后执行回调，您可以在其中设置组件的状态。

工作示例：

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'>