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视频教程》

以上就是react怎么实现文件转base64的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！