这篇文章给大家分享的是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='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实现文件转base64的方法，需要的朋友可以参考上述示例和操作，希望对大家有帮助，想要了解更多可以继续浏览群英网络其他相关的文章。

文本转载自PHP中文网

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• Vuex的作用和原理是什么？如何使用？

  这篇文章主要介绍Vuex的作用，很多新手对于Vuex的原理、使用以及其他概念不是很了解，下面小编就带大家深入的来接Vuex，感兴趣的朋友就继续往下看吧，希望大家阅读完这篇文章能有所收获。

• jQuery怎么让表格无缝滚动，代码是什么

  这篇文章主要为大家详细介绍了jquery实现表格无缝滚动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

• 用swiper制作卡片轮播效果的代码是什么

  这篇文章主要为大家详细介绍了vue3.x使用swiper实现卡片轮播，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

• 基于Vue和ssh如何实现在线聊天，具体过程是什么

  这篇文章主要为大家详细介绍了Vue+ssh框架实现在线聊天，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

• 把Vue3源码喂给ChatGPT的结果分析

  这篇文章主要为大家介绍了让ChatGPT解读Vue3源码过程解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪