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:官方网站通道
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视频教程》
以上就是关于react如何完成文档转base64的具体内容，大量欢迎关注AdminJS其他类似文章！