您现在的位置是:网站首页> 编程资料编程资料
React中使用react-file-viewer问题_React_
2023-12-09
260人已围观
简介 React中使用react-file-viewer问题_React_
使用react-file-viewer
1.npm install react-file-viewer
2.在组建中引入import FileViewer from 'react-file-viewer';
3.使用:
注意:
在使用插件时出现如下报错时:
原因: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 ({ fileLocalUrl &&} onError={this.onError}/> } this.changeFile(e)}/>错误
能遇到这个问题的大部分都是直接把file丢进组件,导致报错
解决思路
window.URL.createObjectURL,创建文件对象的URL,将URL丢进组件即可
在移除文件对象URL的时候记得调用URL.revokeObjectURL(url),清理内存,否则会一直存在内存中,详见官网
https://developer.mozilla.org/zh-CN/docs/Web/API/URL/createObjectURL
对于大文件可能会导致内存崩溃,切记不要预览大文件,最好限制在30M以内
以上为个人经验,希望能给大家一个参考,也希望大家多多支持。
相关内容
- Vue报错Syntax Error:TypeError: this.getOptions is not a function的解决方法_vue.js_
- JavaScript队列数据结构详解_javascript技巧_
- 微信小程序实现tab点击切换_javascript技巧_
- 降低vue-router版本的2种解决方法实例_vue.js_
- 一文让你快速了解JavaScript栈_javascript技巧_
- 从EFCore上下文的使用到深入剖析DI的生命周期最后实现自动属性注入_实用技巧_
- 雷霆战机6月28日29日闯关经验翻倍送活动_手机游戏_游戏攻略_
- 雷霆战机叉叉助手无限刷分刷金币攻略_手机游戏_游戏攻略_
- 雷霆战机暴走模式详解_手机游戏_游戏攻略_
- 放开那三国新版宝马套装怎么获得_手机游戏_游戏攻略_
点击排行
本栏推荐
-
魔兽世界TBC怀旧服声望怎么刷 TBC四大声望速刷方法_网络游戏_游戏攻略_
-
魔兽世界tbc怀旧服破碎大厅全boss打法教程 破碎大厅副本攻略_网络游戏_游戏攻略_
-
魔兽世界TBC怀旧服卡拉赞门任务怎么做 tbc怀旧服卡拉赞门钥匙任务接取方法_网络游戏_游戏攻略_
-
魔兽世界TBC怀旧服猎人实用宏推荐 LR全天赋输出宏整理汇总_网络游戏_游戏攻略_
-
魔兽世界TBC怀旧服幽魂碎片有什么用 70tbc怀旧服幽魂碎片作用介绍_网络游戏_游戏攻略_
-
永劫无间国服和steam互通吗 永劫无间服务器互通介绍_网络游戏_游戏攻略_
-
魔兽世界TBC怀旧服纳格兰竞技场奖励有哪些 tbc怀旧服纳格兰竞技场奖励大全 _网络游戏_游戏攻略_
猜你喜欢
- 魔兽世界TBC怀旧服声望怎么刷 TBC四大声望速刷方法_网络游戏_游戏攻略_
- 魔兽世界tbc怀旧服破碎大厅全boss打法教程 破碎大厅副本攻略_网络游戏_游戏攻略_
- 魔兽世界TBC怀旧服卡拉赞门任务怎么做 tbc怀旧服卡拉赞门钥匙任务接取方法_网络游戏_游戏攻略_
- 魔兽世界TBC怀旧服猎人实用宏推荐 LR全天赋输出宏整理汇总_网络游戏_游戏攻略_
- 魔兽世界TBC怀旧服幽魂碎片有什么用 70tbc怀旧服幽魂碎片作用介绍_网络游戏_游戏攻略_
- 永劫无间国服和steam互通吗 永劫无间服务器互通介绍_网络游戏_游戏攻略_
- 魔兽世界TBC怀旧服纳格兰竞技场奖励有哪些 tbc怀旧服纳格兰竞技场奖励大全 _网络游戏_游戏攻略_