Bagaimana untuk menukar fail ke base64 dalam tindak balas

Cara menukar fail kepada base64 dalam React: 1. Pasang pemalam ReactFileReader 2. Perkenalkan ReactFileReader; 3. Tulis kaedah halaman 4. Dapatkan alamat base64 imej yang dimuat naik;

Persekitaran pengendalian artikel ini: sistem Windows 7, react17.0.1, Dell G3.

Bagaimana untuk menukar fail kepada base64 dalam React?

Tukar fail yang dimuat naik dalam React kepada base64

Kata Pengantar:

React telah pemalam pihak ketiga ReactFileReader boleh mencapai fungsi ini.

Langkah pelaksanaan:

1 Pasang pemalam

npm install react-file-reader --save

2. Pengenalan kod

import ReactFileReader daripada "react-file-reader" ;

3. Kaedah tulis halaman

<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: pintu masuk laman web rasmi

Penggunaan

Import React File Reader

import ReactFileReader from 'react-file-reader';

Penggunaan Asas

handleFiles = files => {

  console.log(files)

}



<ReactFileReader handleFiles={this.handleFiles}>

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

</ReactFileReader>

Response

HTML5 FileList

Base64

Apabila base64 adalah benar, React File Reader mengembalikan Objek JS termasuk kedua-dua fail base64 dan HTML5 FileList. Anda boleh mengakses nilainya di Object.base64 atau 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..."

Akses Senarai Fail HTML5 dengan base64={true}

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

Pembelajaran yang disyorkan: "tutorial video bertindak balas"

Atas ialah kandungan terperinci Bagaimana untuk menukar fail ke base64 dalam tindak balas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!