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預(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>錯誤</div>}
onError={this.onError}/>
}
<input type="file" onChange={e => this.changeFile(e)}/>
</div>
);
}
}
能遇到這個問題的大部分都是直接把file丟進組件,導(dǎo)致報錯

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

