react实现文件转base64的方法：1、安装ReactFileReader插件；2、引入ReactFileReader；3、书写好页面方法；4、获取上传的图片的base64地址即可。
本文操作环境：Windows7系统、react17.0.1、Dell G3。
react怎么实现文件转base64?
react上传文件转base64
npm install react-file-reader --save
<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);
}import ReactFileReader from 'react-file-reader';
handleFiles = files => {
console.log(files)
}
<ReactFileReader handleFiles={this.handleFiles}>
<button className='btn'>Upload</button>
</ReactFileReader>
ResponseHTML5 FileList
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的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
129
收藏
