이미지 미리보기 분리중인데 도와주세요..ㅠ

[배해기]

선생님에게 코칭받고 제 포트폴리오의 퀄리티를 올려보려고 새로만드는중인데

이번에는 좀 더 퀄리티를 신경쓰기위해 여러곳에서 자주쓰일것같은 함수같은걸 따로만들고있습니다..
근데 이미지 미리보기에서 사용되는 reader를 사용하는 함수를 분리시키려니까.. 맘처럼 잘 안됩니다..

아마 자바스크립트실력이 부족해서 그런거지않을까싶지만.. 도움을 받아보고싶습니다 ㅠㅠ..


현재 저는 위 코드를 사용중인데 이걸 분리시켜 다른곳에서도 import해와서 사용하기만하면 되게끔
만들어주고싶습니다..


위 처럼 분리해주고 매개변수로 files를 받아와서 기존에 e.target.files[0]을 받아오고있습니다.

그리고 그 아래서가 문제인데 files은 잘 받아와지고있습니다.

기존코드는 한 컴포넌트에서 다 만들다보니 useState를 만들어둔 뒤 state변경함수로
이미지 미리볼 수 있는 경로를 뽑아서 state에 담아서 보여주는건데 새로 분리해서 만드는 저함수에서는
어찌 그 미리볼 수 있는 경로인 reader.result를 어떻게 내보내고 어떻게 써야할지 모르겠습니다..ㅠㅠ

인자로 state도 보내보고 별짓다했는데 안되네요..

혹시 리덕스툴킷으로 reader.result를 보내면될까싶어 보내봤는데 에러가나네요..,,


이렇게 했더니


이런 에러가 납니다.. ㅠㅠ 어떻게해야할까요,,

[codingapple]

함수안에서 reader 아니면 result를 return으로 뱉으라고 하고 
var 결과 = 함수();
state변경함수(결과); 
하면 될듯요

[배해기]

선생님 말씀대로 

이렇게 return reader를 내보내서
 
제가 사용할 컴포넌트에서 이렇게 사용중입니다. 이녀석은 이제 input file인 녀석한테

달아서 사용중인데 이미지는 잘 나오고있습니다 그런데 이미지를 올리면 화면에 input이나 무언가
렌더가 한번 이루어져야 이미지가 나오는것같습니다..


위 사진이 이미지 처음 올렸을 때고 바로 이미지가 나타나진않고
왼쪽 인풋 아무곳이나 글자를입력하면

그제서야 이미지가 나타납니다.. 이미지는 지금은 

이렇게 불러오는중입니다.

함수내에서 result값을 바로 빼려고하니까 자꾸 에러가나더라구요.. result를 못찾는다 라는에러였나..

const [preview, setPreview] = useState("");
  const previewFunc = (e) => {
   const test = PreviewPhoto(e.target.files[0]);
   const test2 = test.result
  setPreview(test2)
  };
  console.log(preview);

이렇게 사용하니 에러가났습니다..

[codingapple]

https://stackoverflow.com/questions/11829537/html5-filereader-how-to-return-result
이런 예시중에 골라씁시다

[배해기]

저.. 그리고 질문이 하나 더 생겨버렸는데요ㅠ

파이어베이스 이미지업로드하는 파이어베이스 문법을 사용시에
제가 만들고있는것에 이미지업로드 기능을 사용할 곳이
꽤 많다보니 이 번거로움을 줄이고자 업로드할 코드를 따로 또 제작중인데

현재 따로 분리한 js파일인데요 여기서 이미지 업로드가 성공했을 때 데이터베이스에 
데이터를 저장을 해야하는데 문제는

항상 데이터베이스에만 저장하는게 아니라서
어떤때는 데이터베이스에만 어떤 때는 auth에 유저정보 이름과 사진을 업데이트를할때도 있기때문에

이 부분을 인자로 받아올 수 있을까요?


제가 원하는 느낌은 저 주석처리된 부분들인데 저 부분들을 함축하여 인자로 보내기가 가능할까요?

이미지경로,이미지이름,이미지파일 은 인자로 충분히 받아지는데 저 뒷부분이 문제입니다..

해결방법이 궁금합니다 ㅠㅠ..

혹시몰라 업로드하고 url만 빼오는건 어떨까 하고


이런 방법도 해봤는데도 undefined가 들어가더라구요..
그 전에는 const 변수 = StorageUpload('image/",inputPhoto.name,inputPhoto) 로 받고
postPhoto : 변수 를 넣어봤는데도 똑같았습니다..

해결방법이 있을까요..ㅜ

[codingapple]

주석처리부분을 함수로 뺀다는 것입니까 
그럼 함수 안에 있는 변수들은 전부 파라미터로 입력할 수 있게 파라미터 뚫어놓으면 됩니다 

[배해기]

혹시 아니면
 
저곳에서 url만 빼올 수 있을까요?

이곳에서 파일이 업로드되는건 잘 확인이되었는데
저 url을 빼올 방법을 모르겠네요 ㅠ
저 url만 빼오면 어찌 다 해결이 될법합니다.

질문이많아 죄송합니다 ㅠ

[codingapple]

함수 안에서 return storageUploading.snapshot.ref.getDownloadURL() 한 다음 
함수().then(()=>{}) 하면 나올듯요

[글쓴이]

글