오늘의목표
- 팀프로젝트진행
오늘어려운점
- 파일을 올렸을때 이미지를 미리보여주는 작업을 할려고 했다.
``
const [selectedFile , setSelectedFile] = useState(null);
const {
target: { files }
} = event;
const theFile = files[0];
const reader = new FileReader();
reader.onloadend = (finishedEvent) => {
const {
currentTarget: { result }
} = finishedEvent;
setSelectedFile(result);
};
reader.readAsDataURL(theFile);
``
이 코드는 파일 선택 이벤트를 처리고 파일 선택 이벤트가 발생하면 함수는 선택한 파일을 읽고 그 결과를 setSelectedFile() 함수에 전달할수있도록 코드를 작성했는데
이걸 작성하면서 파일로딩이 끝날때 finishedevent를 갖고 여기서 result값으로 state로 저장하고 result를 복사해서 새창에 붙이는 코드를 짯는데
이미지도 나오지 않고 fireStore에도 이미지 사진이 전송되던게 전송도 막혔었다.
if (files.length === 0) return;
사이에 파일에 길이가 0이면 그냥 리턴하고 아닐때는 나타나게 도 시도를 해봤고
``
const {
target: { files },
} = event;
const theFile = files[0];
// console.log(theFile);
const reader = new FileReader();
reader.onloadend = (finishedEvent) => {
const {
currentTarget: { result },
} = finishedEvent;
setSelectedFile(result);
};
reader.readAsDataURL(theFile);
};
...
return(
{fileAddress && (
``
이렇게 위코드를 짜고 아래 파일 버튼에 src로 값을 파일에 값을 넣고 했는데
화면에서 아애 파일 넣는 칸이 살아졌었다. 이방법도 아닌거 같았다.
<img src={selectedFile} alt="" />
input태그 아래에 img 태그를 넣고 src로 selectedFile 을 넣으니
사진이 나오긴 했는데 input태그 안으로 들어가는것이아니었다 스타일컴포넌트 부모자식관계로
안으로 넣어 볼려고 했지만 실패 했다 이것을 고민을 해봐야 될거같다.
느낀점
- 오늘 이미지를 선택하면 그이미지가 미리보기 처럼 나오는걸 구현 할려고 했는데
계속 막히는게 많이있었다 다양하게 시도를 하고 구글링을 했는데 잘 해결되지 않았다.
오늘 이제 팀프로젝트가 막바지라서 회의도 많이하고 머지도 하고 하느라 튜텨님한테 물어보지 못했는데 주말안에 팀원들이 모일때 한번 물어봐서 꼭 해결을 하고 싶었고 이것을 한번 알아놓으면
어느 곳에서든 파일 이미지 미리보기는 항상쓰일거 같아서 꼭 해결하고 싶은 문제이다.
