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('发生错误')}//[可选]:发生错误时呈现的组件,而不是react-file- 
     viewer随附的默认错误组件
    unsupportedComponent={console.log('不支持')} //[可选]:在不支持文件格式的情况下呈现的组件
/>

注意:

在使用插件时出现如下报错时:

原因:react-file-viewer只支持文件网络地址,本地地址可能不支持

解决办法:需要把本地地址换成网络地址进行测试

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,创建文件对象的URL,将URL丢进组件即可

在移除文件对象URL的时候记得调用URL.revokeObjectURL(url),清理内存,否则会一直存在内存中,详见官网

https://developer.mozilla.org/zh-CN/docs/Web/API/URL/createObjectURL

对于大文件可能会导致内存崩溃,切记不要预览大文件,最好限制在30M以内

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • react组件中获取DOM元素的五种方式

    react组件中获取DOM元素的五种方式

    本文主要介绍了React组件中获取DOM元素的五种方式:包括使用ref属性、构造器创建全局变量、动态绑定ref属性、绑定函数定义全局变量和使用hook语法查找DOM,感兴趣的可以了解一下
    2025-01-01
  • 基于React Native 0.52实现轮播图效果

    基于React Native 0.52实现轮播图效果

    这篇文章主要为大家详细介绍了基于React Native 0.52实现轮播图效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-11-11
  • 记录React使用connect后,ref.current为null问题及解决

    记录React使用connect后,ref.current为null问题及解决

    记录React使用connect后,ref.current为null问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-05-05
  • react项目中使用react-dnd实现列表的拖拽排序功能

    react项目中使用react-dnd实现列表的拖拽排序功能

    这篇文章主要介绍了react项目中使用react-dnd实现列表的拖拽排序,本文结合实例代码讲解react-dnd是如何实现,代码简单易懂,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-02-02
  • React 进入页面后自动 focus 到某个输入框的解决方案

    React 进入页面后自动 focus 到某个输入框的解决方案

    React.js 当中提供了 ref 属性来帮助我们获取已经挂载的元素的 DOM 节点,你可以给某个 JSX 元素加上 ref属性,这篇文章主要介绍了React 进入页面以后自动 focus 到某个输入框,需要的朋友可以参考下
    2024-02-02
  • 一文详解ReactNative状态管理redux-toolkit使用

    一文详解ReactNative状态管理redux-toolkit使用

    这篇文章主要为大家介绍了ReactNative状态管理redux-toolkit使用详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03
  • React Native项目中使用Lottie动画的方法

    React Native项目中使用Lottie动画的方法

    这篇文章主要介绍了React Native 实现Lottie动画的相关知识,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-10-10
  • 使用react和redux构建一个简单的计数器

    使用react和redux构建一个简单的计数器

    这篇文章主要为大家详细介绍了如何使用react和redux构建一个简单的计数器,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2025-01-01
  • React从Class方式转Hooks详解

    React从Class方式转Hooks详解

    这篇文章主要介绍了React从Class方式转Hooks详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-09-09
  • React配置Redux并结合本地存储设置token方式

    React配置Redux并结合本地存储设置token方式

    这篇文章主要介绍了React配置Redux并结合本地存储设置token方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-01-01

最新评论