이미지 업로드 방법

썸네일 만들기

• https://duckgugong.tistory.com/249
• https://sinna94.tistory.com/entry/JavaScript-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EC%97%85%EB%A1%9C%EB%93%9C-%EB%AF%B8%EB%A6%AC%EB%B3%B4%EA%B8%B0-%EB%A7%8C%EB%93%A4%EA%B8%B0

 //-------------(join.js)이미지------------
  let [imgBase64, setImgBase64] = useState(null); 
let [profileImg, setProfileImg] = useState(null);
  //이미지 업로드 버튼 실행함수
  const handleChangeUpload = (e) => {
    const uploadFile = e.target.files[0]
    setThumbnail(uploadFile); // 썸네일 만들기
    const formData = new FormData();
    formData.append('profileImage', uploadFile);
    if(formData) {
      setProfileImg(formData);
    }
  };
  //이미지 삭제버튼 실행함수
  const handleClickDeleteImg = (e) => {
    setProfileImg(null);
  }
  // 썸네일 만드는 함수
  const setThumbnail = (fileBlob) => {
    const reader = new FileReader();
    reader.readAsDataURL(fileBlob); 
    return new Promise((resolve) => { 
      reader.onload = () => { 
        setImgBase64(reader.result); 
        resolve(); 
      }; 
    });
  }
 <div className="btn_list">
                <label htmlFor='image' className='upload_btn profile_btn'>
                  <input id='image' type='file' accept='image/*' className='input_hidden' onChange={handleChangeUpload}/>
                  이미지 업로드
                </label>
                <div className='delete_btn profile_btn' onClick={handleClickDeleteImg}>이미지 제거</div>
              </div>

이미지 파일 업로드

https://velog.io/@gay0ung/%EB%A6%AC%EC%95%A1%ED%8A%B8%EB%A1%9C-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EC%97%85%EB%A1%9C%EB%93%9C-%EB%AF%B8%EB%A6%AC%EB%B3%B4%EA%B8%B0

-문제상황 :
file 형식의 객체로만 전송하면 되는줄 알았는데 계속 빈객체가 전송되었다.

-해결방법 :

const uploadFile = e.target.files[0]
    const formData = new FormData();
    formData.append('profileImage', uploadFile);
    const config = {
      Headers: {
        'content-type': 'multipart/form-data',
      }
    }
    console.log(formData)
      if (formData) {
        // const uploadFile = e.target.files[0];
        
        axios.put(
          'http://localhost:3001/users/profile-image', formData, config
        )

const formData = new FormData(); 해서 FormData 형식을 만들어주고 그안에 append로 formData.append('profileImage', uploadFile) 키 - 값을 넣어준다.

      Headers: {
        'content-type': 'multipart/form-data',
      }
    }

을 요청해더에 추가해주어 기존의
Content-Type: application/json 인 데이터를 Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryT2qC6LDM8gOeffPY 로 바꿔주었다. !!!

• 원인 :

---

추가 공부

• axios 전송방법

https://tuhbm.github.io/2019/03/21/axios/

• axios post는 헤더요청사항이 보내는 방법에 따라 달라진다. 이럴때 헤더를 집어넣는다.
  : Javascript 개발 시 (특히 node.js 개발 시) 반드시라고 해도 좋을 정도로 유용한 라이브러리가 있습니다.
  바로 'axios'인데요, http(s)를 통해 다른 서버와 통신할 때의 코드를 줄여주는 매크로 모음 라이브러리입니다.
  get은 바로
  axios.get('https://blog.jell.kr')
  처리할 수 있지만,
  post는 보내는 방법에 따라 달라집니다. (form-data라거나.. x-www-form-urlencoded라거나...)
  이럴 때 우리는 헤더를 집어넣게 되는데, 다음과 같은 방식으로 넣을 수 있습니다.
  https://blog.jell.kr/dev/js/tip/2020/01/07/Axios%20%EC%84%A4%EC%A0%95%20%EC%8B%9C%20%ED%97%A4%EB%8D%94%EB%A5%BC%20%EB%84%A3%EB%8A%94%20%EB%B2%95/

• 헤더와 옵션 설정 방법
  http://daplus.net/javascript-axios%EC%97%90%EC%84%9C-%ED%97%A4%EB%8D%94%EC%99%80-%EC%98%B5%EC%85%98%EC%9D%84-%EC%84%A4%EC%A0%95%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95%EC%9D%80-%EB%AC%B4%EC%97%87%EC%9E%85%EB%8B%88/

• withCredentials :
  cookie에 token 값이 정상적으로 추가되게 하기 위함이다 !
  , withCredentials = true 를 해준다는 것은, client 와 server 가 쿠키 값을 공유하겠다는 말이다!!!
  https://ssungkang.tistory.com/entry/React-axios-%EC%9D%98-withCredentials

: 서버의 자세한 코드까지는 설명하는게 과할거 같아 기본적인 logic만 소개를 하자면, 아이디와 비밀번호가 서버로 넘어오면 유저의 정보가 맞는지 확인한 후에 cookie에 token을 발급하게 됩니다.

그 후 다른 페이지에서의 인증도 이 token을 통해 이뤄지게 되죠.

하지만 통신이 아무리 성공적으로 이뤄져 로그인이 성공하더라도 별다른 에러도 없이 인증이 이루어지지 않았습니다.

확인 결과, cookie에 token 값이 정상적으로 들어가지가 않았습니다.

같은 origin의 경우 request header 에 cookie가 추가되는데 orgin이 달라지는 경우 자동으로 추가되지 않아 생기는 문제점이었습니다.

이를 해결하기 위해서는 서버와 클라이언트 둘 다 추가적인 작업이 필요합니다.