react要怎麼實作檔案轉base64

react實作檔案轉base64的方法：1、安裝ReactFileReader外掛程式；2、引入ReactFileReader；3、書寫好頁面方法；4、取得上傳的圖片的base64位址。

本文操作環境：Windows7系統、react17.0.1、Dell G3。

react怎麼實現檔案轉base64?

react上傳檔案轉base64

前言：

       react有第三方插件ReactFileReader   可以實現這個功能。

實作步驟：

1.安裝外掛程式  

npm install react-file-reader --save

 2.程式碼引入

import ReactFileReader from "react-file-reader";

3.寫頁面方法

<reactfilereader>
    <button>
        <icon></icon> 选择文件
    </button>

</reactfilereader>


// 获取上传的图片的base64地址

handleFiles = (files) => {

    console.log(files.base64);

}

api:官網入口

Usage

Import React File Reader

import ReactFileReader from 'react-file-reader';

Basic Use

handleFiles = files => {

  console.log(files)

}



<reactfilereader>

  <button>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 Objectbase.64 or can access their values at . .fileList

handleFiles = (files) => {

  console.log(files.base64)

}



<reactfilereader>

  <button>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)
}

推薦學習：《react影片教學》 

#

以上是react要怎麼實作檔案轉base64的詳細內容。更多資訊請關注PHP中文網其他相關文章！