Rumah >hujung hadapan web >tutorial js >Bagaimana untuk menukar fail ke base64 dalam tindak balas

Bagaimana untuk menukar fail ke base64 dalam tindak balas

藏色散人
藏色散人asal
2021-11-26 11:34:314086semak imbas

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;

Bagaimana untuk menukar fail ke base64 dalam tindak balas

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!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn