您现在的位置是：网站首页> 编程资料编程资料

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丢进组件，导致报错