 <FileViewer
    fileType={this.state.imgFlieType}//文件類型
    filePath={this.state.details.dragger}//文件地址
    onError={console.log('錯(cuò)誤信息')}
    errorComponent={console.log('發(fā)生錯(cuò)誤')}//[可選]：發(fā)生錯(cuò)誤時(shí)呈現(xiàn)的組件，而不是react-file- 
     viewer隨附的默認(rèn)錯(cuò)誤組件
    unsupportedComponent={console.log('不支持')} //[可選]：在不支持文件格式的情況下呈現(xiàn)的組件
/>

注意：

在使用插件時(shí)出現(xiàn)如下報(bào)錯(cuò)時(shí)：

原因：react-file-viewer只支持文件網(wǎng)絡(luò)地址，本地地址可能不支持

解決辦法：需要把本地地址換成網(wǎng)絡(luò)地址進(jìn)行測試

react-file-viewer預(yù)覽本地文件

代碼

import React, {Component} from 'react';
import FileViewer from 'react-file-viewer';
export default class MyComponent extends Component {
    state = {
        fileLocalUrl: null,
        type: ''
    }
    changeFile(e) {
        let file = e.currentTarget.files[0]
        let fileName = file.name
        console.log(file)
        window.URL = window.URL || window.webkitURL;
        this.setState({
            fileLocalUrl: window.URL.createObjectURL(file),
            type: fileName.substring(fileName.lastIndexOf(".") + 1, fileName.length)
        })
    }
    render() {
        const {fileLocalUrl, type} = this.state
        return (
            <div>
                {
                    fileLocalUrl && <FileViewer
                        fileType={type}
                        filePath={fileLocalUrl}
                        errorComponent={<div>錯(cuò)誤</div>}
                        onError={this.onError}/>
                }
                <input type="file" onChange={e => this.changeFile(e)}/>
            </div>
        );
    }
}

能遇到這個(gè)問題的大部分都是直接把file丟進(jìn)組件，導(dǎo)致報(bào)錯(cuò)