React でファイルを Base64 に変換する方法

React でファイルを Base64 に変換する方法: 1. ReactFileReader プラグインをインストールします; 2. ReactFileReader を導入します; 3. ページ メソッドを作成します; 4. アップロードされた画像の Base64 アドレスを取得します。

この記事の動作環境: Windows7 システム、react17.0.1、Dell G3。

React はファイルを Base64 にどのように変換しますか?

React はファイルを Base64 にアップロードします

前書き:

React には 3 つ目の機能があります。 party プラグイン ReactFileReader でこの機能を実現できます。

実装手順:

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:公式サイト入り口

使い方

Import React File Reader

import ReactFileReader from 'react-file-reader';

基本的な使い方

handleFiles = files => {

  console.log(files)

}



<ReactFileReader handleFiles={this.handleFiles}>

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

</ReactFileReader>

Response

HTML5 FileList

Base64

base64 が true の場合、React File Reader は、base64 ファイルと HTML5 FileList の両方を含む JS オブジェクトを返します。 Object.base64 または 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..."

base64 で HTML5 FileList にアクセスする={true}

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

推奨学習: 「react ビデオ チュートリアル 」

以上がReact でファイルを Base64 に変換する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。