• 技术文章 >web前端 >js教程

    react怎么实现文件转base64

    藏色散人藏色散人2021-11-26 11:34:31原创154

    react实现文件转base64的方法:1、安装ReactFileReader插件;2、引入ReactFileReader;3、书写好页面方法;4、获取上传的图片的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视频教程

    以上就是react怎么实现文件转base64的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:react base64
    上一篇:react native怎么修改端口 下一篇:如何解决react link不跳转问题

    相关文章推荐

    • react是软件吗• 声明react组件的方式有几种• react dva 怎么更改state• react native怎么修改端口

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网