TIL 20211102 [항해99 48일차]

파일업로드

// write.js
const fileInput = React.useRef();
//파일 미리보기
  const filePreview = () => {
    const reader = new FileReader();
    const file = fileInput.current.files[0];
    console.log(file);
    //미리보기 값이 없을 경우
    if (file === undefined) {
      dispatch(setPreview(null));
    } else {
       reader.readAsDataURL(file);
       reader.onloadend = () => {
         //  console.log(reader.result);
        dispatch(setPreview(reader.result));
      };
     }
   };

  const fileUploadHandler = () => {
    const file = fileInput.current.files[0];
    const formData = new FormData();
    formData.append('profile', file);
    formData.append('userName', userName);
    formData.append('hashTagsStr', '@spring@');

    console.log('formData', formData);

    dispatch(editCardProfileDB(formData));
  };

// action.js (리덕스파일)
export const editCardProfileDB = (formData) => async (dispatch) => {
  try {
    const res = await axios.post(`${baseURL}/mypage/frontCard`, formData, {
      headers: {
        'Content-Type': 'multipart/form-data',
        'X-AUTH-TOKEN': `${getToken()}`,
      },
    });
    console.log('앞면카드 response 확인===>', res);
    dispatch(editCardProfile(res.data));
    history.push('/mypage');
  } catch (err) {
    console.log(err);
  }
};

---

파일업로드 작업할때 axios에서 headers를 'Content-Type': 'multipart/form-data'로 보내야해서 그전에는 리덕스로 따로 안나누고 작성페이지에서 한번에 작성했는데 나누는게 맞는거같아서 이번엔 리덕스파일로 나눴다.