react如何實(shí)現(xiàn)文件轉(zhuǎn)base64

小編給大家分享一下react如何實(shí)現(xiàn)文件轉(zhuǎn)base64，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

react實(shí)現(xiàn)文件轉(zhuǎn)base64的方法：1、安裝ReactFileReader插件；2、引入ReactFileReader；3、書寫好頁面方法；4、獲取上傳的圖片的base64地址即可。

本文操作環(huán)境：Windows7系統(tǒng)、react17.0.1、Dell G3。

react上傳文件轉(zhuǎn)base64

前言：

react有一個(gè)第三方插件 ReactFileReader   可以實(shí)現(xiàn)這個(gè)功能。

實(shí)現(xiàn)步驟：

1.安裝插件

npm install react-file-reader --save

2.代碼引入

import ReactFileReader from "react-file-reader";

3.寫頁面方法

<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:官網(wǎng)入口

Usage

Import React File Reader

import ReactFileReader from 'react-file-reader';

Basic Use

handleFiles = files => {

  console.log(files)

}



<ReactFileReader handleFiles={this.handleFiles}>

  <button className='btn'>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 Object.base64 or Object.fileList

handleFiles = (files) => {

  console.log(files.base64)

}



<ReactFileReader fileTypes={[".csv",".zip"]} base64={true} multipleFiles={true} handleFiles={this.handleFiles}>

  <button className='btn'>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如何實(shí)現(xiàn)文件轉(zhuǎn)base64”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！