react如何实现文件转base64

小编给大家分享一下react如何实现文件转base64，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

react实现文件转base64的方法：1、安装ReactFileReader插件；2、引入ReactFileReader；3、书写好页面方法；4、获取上传的图片的base64地址即可。

本文操作环境：Windows7系统、react17.0.1、Dell G3。

react上传文件转base64

前言：

react有一个第三方插件 ReactFileReader 可以实现这个功能。

实现步骤：

1.安装插件

npm install react-file-reader --save

2.代码引入

import ReactFileReader from "react-file-reader";

3.写页面方法

             选择文件    // 获取上传的图片的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)}  UploadResponse

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

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如何实现文件转base64"这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注行业资讯频道！