So konvertieren Sie Dateien in React in Base64

So konvertieren Sie Dateien in Base64: 1. Installieren Sie das ReactFileReader-Plugin. 3. Schreiben Sie die Seitenmethode.

Die Betriebsumgebung dieses Artikels: Windows7-System, React17.0.1, Dell G3.

Wie konvertiere ich Dateien in Base64 in React?

Hochgeladene Dateien in React in Base64 konvertieren

Vorwort:

React verfügt über ein Drittanbieter-Plug-in ReactFileReader, das diese Funktion realisieren kann.

Implementierungsschritte:

1. Plug-in installieren

npm install react-file-reader --save

2. Code-Einführung

ReactFileReader von „react-file-reader“ importieren;

3. Seitenmethode schreiben

<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: offizieller Website-Eingang

Verwendung

React File Reader importieren

import ReactFileReader from 'react-file-reader';

Grundlegende Verwendung

handleFiles = files => {

  console.log(files)

}



<ReactFileReader handleFiles={this.handleFiles}>

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

</ReactFileReader>

Response

HTML5 FileList

Base64

Wenn base64 wahr ist, gibt React File Reader ein JS-Objekt zurück, das sowohl die base64-Dateien als auch die HTML5-Dateiliste enthält ​bei Object.base64 oder 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..."

Zugriff auf HTML5 FileList mit base64={true}

handleFiles = (files) => {
  console.log(files.fileList)
}

Empfohlenes Lernen: „re Aktvideo Tutorial"

Das obige ist der detaillierte Inhalt vonSo konvertieren Sie Dateien in React in Base64. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!