React实现文件转base64的方法与操作是什么？
发布时间：2022-02-08 14:54:31 所属栏目：语言 来源：互联网
导读：这篇文章给大家分享的是React实现文件转base64的方法。小编觉得挺实用的，因此分享给大家做个参考，文中的示例代码介绍得很详细，有需要的朋友可以参考，接下来就跟随小编一起了解看看吧。 本文操作环境：Windows7系统、react17.0.1、Dell G3。 react怎么实
|
这篇文章给大家分享的是React实现文件转base64的方法。小编觉得挺实用的，因此分享给大家做个参考，文中的示例代码介绍得很详细，有需要的朋友可以参考，接下来就跟随小编一起了解看看吧。 本文操作环境：Windows7系统、react17.0.1、Dell G3。 react怎么实现文件转base64? react上传文件转base64，react有一个第三方插件 ReactFileReader 可以实现这个功能。 实现步骤： 1.安装插件 npm install react-file-reader --save 2.代码引入 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> Response HTML5 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) } （编辑：厦门站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
