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('錯(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ò)
解決思路
window.URL.createObjectURL,創(chuàng)建文件對象的URL,將URL丟進(jìn)組件即可
在移除文件對象URL的時(shí)候記得調(diào)用URL.revokeObjectURL(url),清理內(nèi)存,否則會(huì)一直存在內(nèi)存中,詳見官網(wǎng)
https://developer.mozilla.org/zh-CN/docs/Web/API/URL/createObjectURL
對于大文件可能會(huì)導(dǎo)致內(nèi)存崩潰,切記不要預(yù)覽大文件,最好限制在30M以內(nèi)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
react 項(xiàng)目 中使用 Dllplugin 打包優(yōu)化技巧
在用 Webpack 打包的時(shí)候,對于一些不經(jīng)常更新的第三方庫,比如 react,lodash,vue 我們希望能和自己的代碼分離開,這篇文章主要介紹了react 項(xiàng)目 中 使用 Dllplugin 打包優(yōu)化,需要的朋友可以參考下2023-01-01React onBlur回調(diào)中使用document.activeElement返回body完美解決方案
這篇文章主要介紹了React onBlur回調(diào)中使用document.activeElement返回body完美解決方案,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-04-04深入理解react-router 路由的實(shí)現(xiàn)原理
這篇文章主要介紹了深入理解react-router 路由的實(shí)現(xiàn)原理,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-09使用ReactJS實(shí)現(xiàn)tab頁切換、菜單欄切換、手風(fēng)琴切換和進(jìn)度條效果
這篇文章主要介紹了使用ReactJS實(shí)現(xiàn)tab頁切換、菜單欄切換、手風(fēng)琴切換和進(jìn)度條效果的相關(guān)資料,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2016-10-10react+redux的升級(jí)版todoList的實(shí)現(xiàn)
本篇文章主要介紹了react+redux的升級(jí)版todoList的實(shí)現(xiàn),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-12-12react實(shí)現(xiàn)阻止父容器滾動(dòng)
這篇文章主要介紹了react實(shí)現(xiàn)阻止父容器滾動(dòng)方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11React?跨端動(dòng)態(tài)化核心技術(shù)實(shí)例分析
這篇文章主要為大家介紹了React?跨端動(dòng)態(tài)化核心技術(shù)實(shí)例分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-10-10React錯(cuò)誤邊界Error Boundaries詳解
錯(cuò)誤邊界是一種React組件,這種組件可以捕獲發(fā)生在其子組件樹任何位置的JavaScript錯(cuò)誤,并打印這些錯(cuò)誤,同時(shí)展示降級(jí)UI,而并不會(huì)渲染那些發(fā)生崩潰的子組件樹2022-12-12