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如何利用Antd的Form组件实现表单功能详解

    React如何利用Antd的Form组件实现表单功能详解

    这篇文章主要给大家介绍了关于React如何利用Antd的Form组件实现表单功能的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-04-04
  • 使用hooks写React组件需要注意的5个地方

    使用hooks写React组件需要注意的5个地方

    这篇文章主要介绍了使用hooks写React组件需要注意的5个地方,帮助大家更好的理解和学习使用React组件,感兴趣的朋友可以了解下
    2021-04-04
  • 老生常谈js-react组件生命周期

    老生常谈js-react组件生命周期

    下面小编就为大家带来一篇老生常谈js-react组件生命周期。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-05-05
  • 详解React+Koa实现服务端渲染(SSR)

    详解React+Koa实现服务端渲染(SSR)

    这篇文章主要介绍了详解React+Koa实现服务端渲染(SSR),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05
  • 快速搭建React的环境步骤详解

    快速搭建React的环境步骤详解

    本篇文章主要介绍了快速搭建React的步骤详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • React避免不必要的重新渲染的方法示例

    React避免不必要的重新渲染的方法示例

    构建高性能 React 应用程序的关键之一是避免不必要的重新渲染,React 的渲染引擎是高效的,但防止在不需要的地方重新渲染仍然至关重要,在这篇文章中,我们将介绍常见错误以及如何避免它们,需要的朋友可以参考下
    2024-10-10
  • React函数组件传参的实现

    React函数组件传参的实现

    React函数组件通过接受props实现组件间的数据传递,通过组件标签的属性向子组件传递数据,并在子组件中通过参数接收,还可以使用ES6的解构赋值,函数也能作为props传递,以实现父子组件间的交互和通信,下面就来具体了解一下
    2024-09-09
  • 一文详解手动实现Recoil状态管理基本原理

    一文详解手动实现Recoil状态管理基本原理

    这篇文章主要为大家介绍了一文详解手动实现Recoil状态管理基本原理实例解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-05-05
  • React的生命周期函数初始挂载更新移除详解

    React的生命周期函数初始挂载更新移除详解

    这篇文章主要为大家介绍了React的生命周期函数初始挂载更新移除详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08
  • 如何在 React 中调用多个 onClick 函数

    如何在 React 中调用多个 onClick 函数

    这篇文章主要介绍了如何在React中调用多个onClick函数,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2023-11-11

最新评论