React中使用react-file-viewer問題
使用react-file-viewer
1.npm install react-file-viewer
2.在組建中引入import FileViewer from 'react-file-viewer';
3.使用:
<FileViewer fileType={this.state.imgFlieType}//文件類型 filePath={this.state.details.dragger}//文件地址 onError={console.log('錯誤信息')} errorComponent={console.log('發(fā)生錯誤')}//[可選]:發(fā)生錯誤時呈現(xiàn)的組件,而不是react-file- viewer隨附的默認錯誤組件 unsupportedComponent={console.log('不支持')} //[可選]:在不支持文件格式的情況下呈現(xiàn)的組件 />
注意:
在使用插件時出現(xiàn)如下報錯時:
原因:react-file-viewer只支持文件網(wǎng)絡(luò)地址,本地地址可能不支持
解決辦法:需要把本地地址換成網(wǎng)絡(luò)地址進行測試
react-file-viewer預覽本地文件
代碼
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,創(chuàng)建文件對象的URL,將URL丟進組件即可
在移除文件對象URL的時候記得調(diào)用URL.revokeObjectURL(url),清理內(nèi)存,否則會一直存在內(nèi)存中,詳見官網(wǎng)
https://developer.mozilla.org/zh-CN/docs/Web/API/URL/createObjectURL
對于大文件可能會導致內(nèi)存崩潰,切記不要預覽大文件,最好限制在30M以內(nèi)
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
react 項目 中使用 Dllplugin 打包優(yōu)化技巧
在用 Webpack 打包的時候,對于一些不經(jīng)常更新的第三方庫,比如 react,lodash,vue 我們希望能和自己的代碼分離開,這篇文章主要介紹了react 項目 中 使用 Dllplugin 打包優(yōu)化,需要的朋友可以參考下2023-01-01React onBlur回調(diào)中使用document.activeElement返回body完美解決方案
這篇文章主要介紹了React onBlur回調(diào)中使用document.activeElement返回body完美解決方案,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-04-04深入理解react-router 路由的實現(xiàn)原理
這篇文章主要介紹了深入理解react-router 路由的實現(xiàn)原理,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-09-09使用ReactJS實現(xiàn)tab頁切換、菜單欄切換、手風琴切換和進度條效果
這篇文章主要介紹了使用ReactJS實現(xiàn)tab頁切換、菜單欄切換、手風琴切換和進度條效果的相關(guān)資料,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下2016-10-10react+redux的升級版todoList的實現(xiàn)
本篇文章主要介紹了react+redux的升級版todoList的實現(xiàn),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-12-12