๊ด€๋ฆฌ ๋ฉ”๋‰ด

DATA101

[React] FileReader๋ฅผ ํ™œ์šฉํ•œ ํ…์ŠคํŠธ ํŒŒ์ผ ์ฝ์–ด์˜ค๊ธฐ ๋ณธ๋ฌธ

SW ๊ฐœ๋ฐœ/React JS

[React] FileReader๋ฅผ ํ™œ์šฉํ•œ ํ…์ŠคํŠธ ํŒŒ์ผ ์ฝ์–ด์˜ค๊ธฐ

DATA101 2022. 6. 29. 12:41
728x90
๋ฐ˜์‘ํ˜•

๐Ÿ“Œ ๊ฐœ์š”

  • ๋ฆฌ์•กํŠธ์—์„œ FileReader๋ฅผ ํ™œ์šฉํ•˜์—ฌ ์—…๋กœ๋“œํ•œ ํ…์ŠคํŠธ ํŒŒ์ผ์˜ ๋‚ด์šฉ ์ฝ์–ด์˜ค๊ธฐ

๐Ÿ‘จ‍๐Ÿ’ป ์ฝ”๋“œ

import React, {Component} from 'react';

class FileUpload extends Component {
  onFileChange(e){
    let file = e.target.files[0];
    let fileReader = new FileReader();
    fileReader.onload = () => {
      console.log(fileReader.result);
    };
    fileReader.readAsText(file);
  }
  render(){
    return (
      <div>
        <input type="file" onChange={tihs.onFileChange.bind(this)} />
      </div>
    );
  }
}

โœ… ๊ฒฐ๊ณผ

์•„๋ž˜๋Š” ํ…Œ์ŠคํŠธ์šฉ ํ…์ŠคํŠธ ํŒŒ์ผ์ž…๋‹ˆ๋‹ค.

ํ…Œ์ŠคํŠธ ํŒŒ์ผ

์•„๋ž˜๋Š” ์ฝ˜์†”์— ์ฐํžŒ ํ…Œ์ŠคํŠธ ๊ฒฐ๊ณผ์ž…๋‹ˆ๋‹ค.


ํฌ์ŠคํŒ… ๋‚ด์šฉ์— ์˜ค๋ฅ˜๊ฐ€ ์žˆ๋‹ค๋ฉด ์•„๋ž˜์— ๋Œ“๊ธ€ ๋‚จ๊ฒจ์ฃผ์„ธ์š”.

๊ทธ๋Ÿผ ์˜ค๋Š˜๋„ ์ฆ๊ฑฐ์šด ํ•˜๋ฃจ ๋ณด๋‚ด์‹œ๊ธธ ๋ฐ”๋ž๋‹ˆ๋‹ค :)

๊ณ ๋ง™์Šต๋‹ˆ๋‹ค๐Ÿ˜Š

728x90
๋ฐ˜์‘ํ˜•