반응에서 파일을 base64로 변환하는 방법

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. 코드 소개

"react-file-reader"에서 ReactFileReader 가져오기;

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: 공식 웹사이트 입구

사용법

React 파일 리더 가져오기

import ReactFileReader from 'react-file-reader';

기본 사용

handleFiles = files => {

  console.log(files)

}



<ReactFileReader handleFiles={this.handleFiles}>

  <button className=&#39;btn&#39;>Upload</button>

</ReactFileReader>

Response

HTML5 FileList

Base64

base64가 true인 경우 React 파일 리더는 base64 파일과 HTML5 FileList를 모두 포함하는 JS 객체를 반환합니다. 해당 값에 액세스할 수 있습니다. ​Object.base64 또는 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..."

base64={true}

handleFiles = (files) => {
  console.log(files.fileList)
}

로 HTML5 FileList에 액세스하세요. 권장 학습: "react video 튜토리얼"

위 내용은 반응에서 파일을 base64로 변환하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!