小编给大家分享一下React如何实现文件转base64,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
小编给大家分享一下React如何实现文件转base64,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
react实现文件转base64的方法:1、安装ReactFileReader插件;2、引入ReactFileReader;3、书写好页面方法;4、获取上传的图片的base64地址即可。
本文操作环境:windows7系统、react17.0.1、Dell G3。
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>
Response
HTML5 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如何实现文件转base64”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注编程网VUE频道!
--结束END--
本文标题: react如何实现文件转base64
本文链接: https://www.lsjlt.com/news/87149.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2022-11-13
2022-10-19
2022-10-19
2022-10-19
2022-10-19
2022-10-19
2022-10-19
2022-10-19
2022-10-19
2022-10-19
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0