欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

React中使用react-file-viewer問題

 更新時間:2022年09月01日 17:18:34   作者:很好。  
這篇文章主要介紹了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阻止無效重渲染的多種方式

    詳解react阻止無效重渲染的多種方式

    這篇文章主要介紹了詳解react阻止無效重渲染的多種方式,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-12-12
  • react 項目 中使用 Dllplugin 打包優(yōu)化技巧

    react 項目 中使用 Dllplugin 打包優(yōu)化技巧

    在用 Webpack 打包的時候,對于一些不經(jīng)常更新的第三方庫,比如 react,lodash,vue 我們希望能和自己的代碼分離開,這篇文章主要介紹了react 項目 中 使用 Dllplugin 打包優(yōu)化,需要的朋友可以參考下
    2023-01-01
  • React onBlur回調(diào)中使用document.activeElement返回body完美解決方案

    React onBlur回調(diào)中使用document.activeElement返回body完美解決方案

    這篇文章主要介紹了React onBlur回調(diào)中使用document.activeElement返回body完美解決方案,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2023-04-04
  • 深入理解react-router 路由的實現(xiàn)原理

    深入理解react-router 路由的實現(xiàn)原理

    這篇文章主要介紹了深入理解react-router 路由的實現(xiàn)原理,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-09-09
  • React狀態(tài)管理Redux原理與介紹

    React狀態(tài)管理Redux原理與介紹

    redux是redux官方react綁定庫,能夠使react組件從redux store中讀取數(shù)據(jù),并且向store分發(fā)actions以此來更新數(shù)據(jù),這篇文章主要介紹了react-redux的設(shè)置,需要的朋友可以參考下
    2022-08-08
  • 使用ReactJS實現(xiàn)tab頁切換、菜單欄切換、手風琴切換和進度條效果

    使用ReactJS實現(xiàn)tab頁切換、菜單欄切換、手風琴切換和進度條效果

    這篇文章主要介紹了使用ReactJS實現(xiàn)tab頁切換、菜單欄切換、手風琴切換和進度條效果的相關(guān)資料,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下
    2016-10-10
  • react+redux的升級版todoList的實現(xiàn)

    react+redux的升級版todoList的實現(xiàn)

    本篇文章主要介紹了react+redux的升級版todoList的實現(xiàn),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-12-12
  • react實現(xiàn)阻止父容器滾動

    react實現(xiàn)阻止父容器滾動

    這篇文章主要介紹了react實現(xiàn)阻止父容器滾動方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2023-11-11
  • React?跨端動態(tài)化核心技術(shù)實例分析

    React?跨端動態(tài)化核心技術(shù)實例分析

    這篇文章主要為大家介紹了React?跨端動態(tài)化核心技術(shù)實例分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-10-10
  • React錯誤邊界Error Boundaries詳解

    React錯誤邊界Error Boundaries詳解

    錯誤邊界是一種React組件,這種組件可以捕獲發(fā)生在其子組件樹任何位置的JavaScript錯誤,并打印這些錯誤,同時展示降級UI,而并不會渲染那些發(fā)生崩潰的子組件樹
    2022-12-12

最新評論