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)行測(cè)試
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)建文件對(duì)象的URL，將URL丟進(jìn)組件即可
在移除文件對(duì)象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
對(duì)于大文件可能會(huì)導(dǎo)致內(nèi)存崩潰，切記不要預(yù)覽大文件，最好限制在30M以內(nèi)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
本文主要介紹了React組件中獲取DOM元素的五種方式：包括使用ref屬性、構(gòu)造器創(chuàng)建全局變量、動(dòng)態(tài)綁定ref屬性、綁定函數(shù)定義全局變量和使用hook語(yǔ)法查找DOM,感興趣的可以了解一下2025-01-01
基于React Native 0.52實(shí)現(xiàn)輪播圖效果
這篇文章主要為大家詳細(xì)介紹了基于React Native 0.52實(shí)現(xiàn)輪播圖效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-11-11
記錄React使用connect后,ref.current為null問題及解決
記錄React使用connect后,ref.current為null問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
react項(xiàng)目中使用react-dnd實(shí)現(xiàn)列表的拖拽排序功能
這篇文章主要介紹了react項(xiàng)目中使用react-dnd實(shí)現(xiàn)列表的拖拽排序,本文結(jié)合實(shí)例代碼講解react-dnd是如何實(shí)現(xiàn)，代碼簡(jiǎn)單易懂，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-02-02
React 進(jìn)入頁(yè)面后自動(dòng) focus 到某個(gè)輸入框的解決方案
React.js 當(dāng)中提供了 ref 屬性來幫助我們獲取已經(jīng)掛載的元素的 DOM 節(jié)點(diǎn),你可以給某個(gè) JSX 元素加上 ref屬性,這篇文章主要介紹了React 進(jìn)入頁(yè)面以后自動(dòng) focus 到某個(gè)輸入框,需要的朋友可以參考下2024-02-02
一文詳解ReactNative狀態(tài)管理redux-toolkit使用
這篇文章主要為大家介紹了ReactNative狀態(tài)管理redux-toolkit使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
React Native項(xiàng)目中使用Lottie動(dòng)畫的方法
這篇文章主要介紹了React Native 實(shí)現(xiàn)Lottie動(dòng)畫的相關(guān)知識(shí)，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-10-10
使用react和redux構(gòu)建一個(gè)簡(jiǎn)單的計(jì)數(shù)器
這篇文章主要為大家詳細(xì)介紹了如何使用react和redux構(gòu)建一個(gè)簡(jiǎn)單的計(jì)數(shù)器,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2025-01-01
這篇文章主要介紹了React從Class方式轉(zhuǎn)Hooks詳解，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-09-09
React配置Redux并結(jié)合本地存儲(chǔ)設(shè)置token方式
這篇文章主要介紹了React配置Redux并結(jié)合本地存儲(chǔ)設(shè)置token方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01