react怎么实现文件转base64
时间:2021-12-03 来源:互联网
今天PHP爱好者为您带来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>
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怎么实现文件转base64的详细内容,更多请关注php爱好者其它相关文章!
-
手机软件开发工具大全:从入门到精通的必备工具指南 2025-09-17
-
如何有效拦截手机骚扰软件 5大实用防护技巧分享 2025-09-17
-
手机软件安装包下载大全 安全无毒安卓苹果应用免费高速获取 2025-09-17
-
安卓手机软件下载大全2024:最新热门应用一键安装推荐 2025-09-17
-
-
手机软件安装指南:从下载到设置的全流程详解 2025-09-17