• 카테고리

    질문 & 답변

  • 세부 분야

    풀스택

  • 해결 여부

    해결됨

쌤 이미지 업로드 질문있습니다.

20.10.13 22:04 작성 조회수 104

0

이 강의에서 post /image  경로로 요청이 올경우 multer를 활용해서 업로드를  하고있는데, 

이런방식이 보통 쓰이는 사용 방식인가요?

유저가 submit를 누르는게아니라 이미지를 선택한것만으로도 이미지가 서버에 올라가고있는데, 유저가 이미지만 선택하고 취소버튼을 누를경우 유저가 선택했던 이미지가 이미 서버로 올라가서 자원낭비를 초래하지않을까해서요..

 만약 multer-s3를 사용하고, 1년 무료가 끝나면 쌓이고 쌓여 비용문제가 발생할 것 같아서요.

뭐, multer-s3를 사용한다고 가정해서, 취소버튼을 누를경우 s3 버캣에 올라간 이미지를 삭제해주는 코드를 작성해줄수있겠지만 이건 너무 번거로울것 같고...

유저가 submit를 누를경우에 이미지가 서버로 업로드되는 방식으로 하는건 별론가요?

근데  이럴경우 유저가 선택한 이미지를 프론트에서 어떤식으로 받아줘야하는지 감이안잡힙니다.

 제 질문이 잘 이해가 가셨는지 모르겠네요 ㅠㅠ 답변 기다리겠습니다!

course-thumbnail

따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]

답변 2

·

답변을 작성해보세요.

1

John Ahn님의 프로필

John Ahn

지식공유자

2020.10.15

아  ^^ 원래는 preview를 넣을수 있습니다...
제가 실무에서 하는 소스를 하나 올려놓아볼게요 ~ 

handleImagePreview = (e) => {
e.stopPropagation();
e.preventDefault();

let file = e.currentTarget.files[0];

let reader = new FileReader();
reader.onloadend = () => {
if (this._isMounted) {
if (coverList.length === 4) {
coverList.splice(1, 1)
}
coverList.push({ image: reader.result, index: coverList.length });

if (this.state.files.length === 4) {
this.state.files.splice(1, 1)
}

this.setState({
files: [...this.state.files, file],
file: file,
imagePreviewUrl: reader.result
}, this.selected);
}
};

reader.readAsDataURL(file);

수고하세요 ~ 

0

양은열님의 프로필

양은열

2020.11.02

죄송한데 제가 완전 초보라서 답변 내용을 어디다가 적용시키고 프리뷰가 보여지는 곳은 어떤식으로 적용해야할지 감이 잘 안아와서요..ㅠㅜㅠㅜ 좀 더 자세하게 설명해주실 수 있을까요?ㅠㅜ

이 글과 비슷한 Q&A