我的编程空间,编程开发者的网络收藏夹
学习永远不晚

React中使用react-file-viewer问题

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

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以内

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

React中使用react-file-viewer问题

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

React中useEffect使用问题怎么解决

本篇内容介绍了“React中useEffect使用问题怎么解决”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!前言最近看了一下 ant-des
2023-07-02

在React中使用Redux解决的问题小结

在React中组件通信的数据流是单向的,顶层组件可以通过props属性向下层组件传递数据,而下层组件不能直接向上层组件传递数据,这篇文章主要介绍了使用react+redux实现弹出框案例,需要的朋友可以参考下
2022-11-13

解决react-connect中使用forwardRef遇到的问题

这篇文章主要介绍了解决react-connect中使用forwardRef遇到的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
2023-05-20

react如何在React html中使用

本篇文章为大家展示了react如何在React html中使用,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。基本使用
2023-06-14

React项目中className运用及问题解决

这篇文章主要为大家介绍了React项目中className运用及问题解决,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2022-12-15

React 18中的state概念与使用、注意问题解决

state和props类似,都是一种存储属性的方式,但是不同点在于state只属于当前组件,其他组件无法访问,这篇文章主要介绍了React 18中的state概念与使用、注意问题,需要的朋友可以参考下
2022-12-15

React中immutable的使用

目录UI组件渲染性能方案一:shallow compare总结:react 一直遵循UI = fn(state) 的原则,有时候我们的state却和UI不同步 有时候组件本身在业务上不需要渲染,却又会再一次re-render。之前在项目中遇
2023-04-19

React 中使用 react-i18next 国际化的过程(react-i18next 的基本用法)

i18next 是一款强大的国际化框架,react-i18next 是基于 i18next 适用于 React 的框架,本文介绍了 react-i18next 的基本用法,如果更特殊的需求,文章开头的官方地址可以找到答案
2023-01-06

React中使用window.print()出现页面无响应问题怎么办

这篇文章主要介绍了React中使用window.print()出现页面无响应问题怎么办,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。一、问题背景:window.print()
2023-06-25

编程热搜

目录