# FileReader

24개의 포스트

Day-31 FileReader, Promise.all, LazyLoad & PreLoad

기존방식대로 이미지를 올릴 때는 몇가지 비효율적인 면이 존재한다.이미지 파일을 불러왔는데 등록은 하지 않고 뒤로가게 되면 사용되지 않는 파일이 스토리지에 남아있어 용량이 많이 찬다.스토리지에서 받아오는 파일의 속도가 느려진다.따라서 이미지 선택 후 백엔드로 보내주지 않

2022년 6월 21일
·
0개의 댓글
post-thumbnail

코드캠프 FE 31일차 - TIL(FileReader,Promise.all,LazyLoad/PreLoad)

📔 학습목표 기존 업로드 방식은 비효율적이야 >> FileReader Async-await for문에서 쓰면 안된다고? >> Promise.all 내가 원할 때 이미지 불러오기 >> LazyLoad/PreLoad 업로드파일 프로세스 브라우저에서 플러스 이미지를

2022년 6월 21일
·
0개의 댓글
post-thumbnail

31) FileReader ?

Algorithm Self Study, Image Upload Process, Promise & Promise.all, LazyLoad vs PreLoad, Algorithm Class, self Study

2022년 6월 21일
·
0개의 댓글

FileReader, PromiseAll, Lazy/PreLoad

1.이미지 업로드 방식 FileReader Async-await 와 for Promise.all 3.이미지 불러오기 LazyLoad/preLoad FileReader 기존의 이미지 업로드 방식은 Storage를 통해서 브라우저 => 백엔드 => Storage 로

2022년 4월 30일
·
0개의 댓글
post-thumbnail

[Java] Char 단위 입출력

Char 단위 입출력 클래스를 이용해 콘솔과 파일에 문자열 입출력하는 방법을 정리했습니다.

2022년 4월 27일
·
0개의 댓글
post-thumbnail

31일차) 언제까지 사진 한 장씩 올리는거 기다릴거야! FileReader/readAsDataURL/Promise.all/ 실무 위주 !성능 높여 ! 끌어올려! Code Camp FE 6기

오늘 배울 내용 우리가 기존에 쓰던 이미지 업로드 방식 백엔드의 uploadFile api요청을 통해서 storage에 사진을 저장하고, url을 받아와서 브라우저에 url을 넘겨주었었다.그 다음에 그 url을 첨부해서 createBoard api요청을 해서게시글에 이

2022년 4월 26일
·
2개의 댓글

FileReader 로 여러 이미지 파일 동시에 첨부하기 ( + Next/React, TypeScript )

이전 프로젝트에서 FileReader 로 이미지 파일 여러개를 첨부하는 코드를 그대로 현재 프로젝트에 적용했는데 문제가 발생했다동시에 여러개, 2~3개의 사진을 첨부하면 FileReader 로 읽어서 readAsDataURL 메서드가 돌아서 사진을 데이터URL 로 돌려

2022년 4월 1일
·
1개의 댓글
post-thumbnail

20220225_TIL : 이미지 업로드

기존에 스토리지 저장 방식에서는 게시물을 등록하지 않아도 이미지를 로드할때 스토리지에 저장하고 그 url을 받아와서 등록하는 방식이었다.JS 기능 FileReader()를 사용해서 아직 파일을 업로드(uploadFile)하지는 않은 상태로 임시 주소를 만들어서 이미지를

2022년 2월 26일
·
0개의 댓글

2022-01-18(화) 10주차 2일

I/O 스트림 문법 (com.eomcs.io) ex03 ~ ex07

2022년 1월 18일
·
0개의 댓글
post-thumbnail

[2차 프로젝트][숙박플랫폼] 어드민 페이지 - 이미지 업로더 만들기fileReader API, base64인코딩, formData

formData는 콘솔에 출력되지 않는다.http://daplus.net/javascript-javascript%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%98%EC%97%AC-%EC%9D%B4%EB%AF%B8%EC%A7%80%EB%A5%BC

2022년 1월 16일
·
0개의 댓글

2022-01-07(금) 8주차 4일

07.1 파일 API 활용: 데이터를 텍스트 형식(CSV)으로 읽고 쓰기

2022년 1월 7일
·
0개의 댓글

react FileReader

일단 FileReader 객체는 File 객체 혹은 Blob 객체를 이용해 파일의 내용을 읽는다.만약 전달 받은 파일을 읽기 성공하면 load EventListener에 등록한 함수가 호출이된다.FileReader.onload읽기 동작이 성공적으로 완료 되었을 때 발생

2022년 1월 4일
·
0개의 댓글
post-thumbnail

Day 32

FileReader자바스크립트에 있는 기능이다. 미리보기를 할 수 있지만 내 컴퓨터에 저장되는 거기 때문에 다른사람은 못본다. 이후 fileReader.readAsDataURL(파일) 을 하면 파일에서 URL을 만들어준다. fileReader.onload로 불러온다.그

2021년 12월 14일
·
0개의 댓글

File API

File API 정리 ( + 텍스트, 이미지 파일 처리 )

2021년 11월 15일
·
0개의 댓글
post-thumbnail

[React] 프로필 사진 업로더 만들기

프로필 사진을 클릭하면 프로필 사진을 업로드 할 수 있도록 만들어 보자1\. 프로필 사진을 표시 할 창 생성 일단 프로필 사진이 표시 될 공간이자 이미지 업로더가 될 태그를 만들어주자.img태그로 동그랗게 만들어도 된다. 나는 antd의 Avatar를 사용했다. 그

2021년 10월 11일
·
0개의 댓글
post-thumbnail

미리보기 이미지

미리보기 이미지

2021년 10월 4일
·
0개의 댓글
post-thumbnail

fileReader

fileReader를 이용해서 데이터 처리해보기

2021년 9월 29일
·
0개의 댓글
post-thumbnail

Javascript 파일 읽기

브라우저에서는 보안상 로컬 파일에 직접 접근 할 수 없다.inputtype=file 는 브라우저에서 유저가 직접 로컬의 파일을 선택할 수 있게 도와준다.선택한 파일은 File 로 정의되고 FileList 에 담기게 된다.이때 multiple 설정 여부와 관계없이 배열

2021년 8월 22일
·
2개의 댓글

[JS] 이미지 파일

이미지를 바꿨을 때 저장하지 않고도 바로 볼 수 있는 방법은 뭘까?getAvatar.value에 이상한 경로값이 나왔다.value: "C:\\\\fakepath\\\\My Thumbnail (4).jpg"왜 정상적인 url이 아니라 fakepath라고 나오는 것일까?

2021년 7월 27일
·
0개의 댓글
post-thumbnail

[모던JS: 심화] 바이너리 데이터와 파일

본 포스팅은 여기에 올라온 게시글을 바탕으로 작성되었습니다.파트와 카테고리 동일한 순서로 모든 내용을 소개하는 것이 아닌, 몰랐거나 새로운 내용 위주로 다시 정리하여 개인공부 목적으로 작성합니다.중간중간 개인 판단 하에 필요하다고 생각될 시, 기존 내용에 추가로 보충되

2021년 7월 11일
·
0개의 댓글