程式碼

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>錯誤</div>}
                        onError=
 
{this.onError}/>
                }
                <input type="file" onChange={e => this.changeFile(e)}/>
            </div>

        );
    }

}

能遇到這個問題的大部分都是直接把file丟進元件，導致報錯

解決思路：window.URL.createObjectURL，建立檔案物件的URL，將URL丟進元件即可

在移除檔案物件URL的時候記得呼叫URL.revokeObjectURL(url)，清理記憶體，否則會一直存在記憶體中，詳見官網

https://developer.mozilla.org/zh-CN/docs/Web/API/URL/createObjectURL

對於大檔案可能會導致記憶體崩潰，切記不要預覽大檔案，最好限制在30M以內