Comment convertir des fichiers en base64 en réaction

Comment convertir des fichiers en base64 dans React : 1. Installez le plug-in ReactFileReader ; 2. Introduisez ReactFileReader ; 3. Écrivez la méthode de page ; 4. Obtenez l'adresse base64 de l'image téléchargée.

L'environnement d'exploitation de cet article : système Windows7, React17.0.1, Dell G3.

Comment convertir des fichiers en base64 dans React ?

Convertir les fichiers téléchargés dans React en base64

Préface :

React dispose d'un plug-in tiers ReactFileReader qui peut réaliser cette fonction.

Étapes de mise en œuvre :

1. Installer le plug-in

npm install react-file-reader --save

2. Introduction au code

importer ReactFileReader depuis "react-file-reader" ;

3. Méthode d'écriture de page

<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 : entrée officielle du site Web

. Utilisation

Importer React File Reader

import ReactFileReader from 'react-file-reader';

Utilisation de base

handleFiles = files => {

  console.log(files)

}



<ReactFileReader handleFiles={this.handleFiles}>

  <button className=&#39;btn&#39;>Upload</button>

</ReactFileReader>

Response

HTML5 FileList

Base64

Lorsque base64 est vrai, React File Reader renvoie un objet JS comprenant à la fois les fichiers base64 et la liste de fichiers HTML5. Vous pouvez accéder à leurs valeurs. At object.base64 ou 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 avec base64 = {true}

rreee

recomend apprenti tutoriel"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!