react怎么实现文件转base64api:官网入口

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