Recent Posts
Recent Comments
Archives
๋ฐ˜์‘ํ˜•
250x250
ยซ   2024/05   ยป
์ผ ์›” ํ™” ์ˆ˜ ๋ชฉ ๊ธˆ ํ† 
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
Today
Yesterday

Total
05-19 00:00
๊ด€๋ฆฌ ๋ฉ”๋‰ด

Hey Tech

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

SW ๊ฐœ๋ฐœ/React JS

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

Tony Park 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
๋ฐ˜์‘ํ˜•
Comments