本文操作环境：Windows7系统、react17.0.1、Dell G3。
react怎么实现文件转base64?
react上传文件转base64
前言：
react有一个第三方插件 ReactFileReader 可以实现这个功能。
实现步骤：
1.安装插件
复制代码1
npm install react-file-reader --save
登录后复制2.代码引入
import ReactFileReader from "react-file-reader";
3.写页面方法
复制代码1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<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
复制代码1
import ReactFileReader from 'react-file-reader';
登录后复制Basic Use
复制代码1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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
复制代码1
2
3
4
5
6
7
8
9
10
11
12
13
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}
复制代码1
["data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA", "data:image/png;base64,i..."]
登录后复制multipleFiles={false}
复制代码1
"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA..."
登录后复制Access HTML5 FileList with base64={true}
复制代码1
2
3
handleFiles = (files) => {
console.log(files.fileList)
}
登录后复制推荐学习：《react视频教程》
以上就是react怎么实现文件转base64的详细内容，更多请关注靠谱客其它相关文章！
最后
以上就是谦让红酒最近收集整理的关于react怎么实现文件转base64的全部内容，更多相关react怎么实现文件转base64内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复