如何用React实现文件转换为Base64编码？

本文共计439个文字，预计阅读时间需要2分钟。

React实现文件转Base64的方法：

1.安装ReactFileReader插件

2.引入ReactFileReader

3.编写页面方法

4.获取上传图片的Base64地址

操作环境：Windows 7系统、React 17.0.1、Dell G3

react实现文件转base64的方法：1、安装ReactFileReader插件；2、引入ReactFileReader；3、书写好页面方法；4、获取上传的图片的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:官网入口UsageImport 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) }

推荐学习：《react视频教程》