首页 > web前端 > js教程 > 正文

react怎么实现文件转base64

藏色散人
发布: 2021-11-26 11:34:31
原创
4052 人浏览过

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

react怎么实现文件转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

    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:官网入口

Usage

Import React File Reader

import ReactFileReader from 'react-file-reader';
登录后复制

Basic Use

handleFiles = files => {

  console.log(files)

}



<ReactFileReader handleFiles={this.handleFiles}>

  <button className=&#39;btn&#39;>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=&#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..."
登录后复制

Access HTML5 FileList with base64={true}

handleFiles = (files) => {
  console.log(files.fileList)
}
登录后复制

推荐学习:《react视频教程》 

以上是react怎么实现文件转base64的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板