How to convert files to base64 in React: 1. Install the ReactFileReader plug-in; 2. Introduce ReactFileReader; 3. Write the page method; 4. Get the base64 address of the uploaded image.

The operating environment of this article: Windows7 system, react17.0.1, Dell G3.

How does react convert files to base64?

react uploads files to base64

Foreword:

React has a third-party plug-in ReactFileReader can achieve this function.

Implementation steps:

1. Install plug-in

npm install react-file-reader --save

2. Code introduction

import ReactFileReader from "react-file-reader";

3. Write page method

<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:Official website entrance

Usage

Import React File Reader

import ReactFileReader from 'react-file-reader';

Basic Use

handleFiles = files => {

  console.log(files)

}



<ReactFileReader handleFiles={this.handleFiles}>

  <button className=&#39;btn&#39;>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=&#39;btn&#39;>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)
}

Recommended learning: "react video tutorial"

The above is the detailed content of How to convert files to base64 in react. For more information, please follow other related articles on the PHP Chinese website!