WWW.lllT.neT

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的详尽具体内容,大量请关心自学java网其他相关文章!

WWW.lllT.neT

声明:有的资源来自网络转载,版权归原作者所有,如有侵犯到您的权益请联系邮箱:our333@126.com我们将配合处理!

原文地址:react如何完成文档转base64发布于2021-12-08 13:48:02