react如何实现文件转base64
小编给大家分享一下react如何实现文件转base64，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
react实现文件转base64的方法：1、安装ReactFileReader插件；2、引入ReactFileReader；3、书写好页面方法；4、获取上传的图片的base64地址即可。
本文操作环境：Windows7系统、react17.0.1、Dell G3。
react上传文件转base64
前言：
react有一个第三方插件 ReactFileReader 可以实现这个功能。
实现步骤：
1.安装插件
npm install react-file-reader --save2.代码引入
import ReactFileReader from "react-file-reader";
3.写页面方法
<ReactFileReader
fileTypes={[".png",".jpg",".gif", "jpeg"]}
base64
multipleFiles={!1}
handleFiles={this.handleFiles}>
<Button>
<Icon type="upload" /> 选择文件
</Button>
</ReactFileReader>
// 获取上传的图片的base64地址
handleFiles = (files) => {
console.log(files.base64);
}api:官网入口
Usage
Import React File Reader
import ReactFileReader from 'react-file-reader';Basic Use
handleFiles = files => {
console.log(files)
}
<ReactFileReader handleFiles={this.handleFiles}>
<button className='btn'>Upload</button>
</ReactFileReader>
ResponseHTML5 FileList
Base64
When base64 is true, React File Reader returns a JS Object including both the base64 files and the HTML5 FileList. You can access their values at Object.base64 or Object.fileList
handleFiles = (files) => {
console.log(files.base64)
}
<ReactFileReader fileTypes={[".csv",".zip"]} base64={true} multipleFiles={true} handleFiles={this.handleFiles}>
<button className='btn'>Upload</button>
</ReactFileReader>Response
multipleFiles={true}
["data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA", "data:image/png;base64,i..."]multipleFiles={false}
"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA..."Access HTML5 FileList with base64={true}
handleFiles = (files) => {
console.log(files.fileList)
}以上是“react如何实现文件转base64”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网行业资讯频道！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
