동영상 업로드 기능 구현하기

hanbin9775 commented 3 years ago

이 부분은 서로 공유하고 공부할 부분이 많을 것 같아서 따로 이슈를 팠다.

Upload process

TODO

[x] 모달 마지막 페이지 구현
[x] axios 로 백 연결
[x] x아이콘과 마지막 버튼에 모달 닫기 추가
[ ] 맨앞 페이지 커서 바꾸기

hanbin9775 commented 3 years ago

payload가 너무 크다는데 클라이언트에서 보내는 request 제한 문제인지 server측 문제인지 함 알아보자.

hanbin9775 commented 3 years ago

axios config?

const customAxios: AxiosInstance = axios.create({
  baseURL: process.env.REACT_APP_SERVER,
  headers: {
    Authorization: `Bearer ${Token.getToken('access_token')}`,
  },
  maxContentLength: 100000000,
  maxBodyLength: 100000000,
});

axios 기본 config가 혹시 너무 작아서 발생하는 문젠가 싶어 위와같이 작성해서 요청해보았는데 같은 에러 발생

413 error

https://developer.mozilla.org/ko/docs/Web/HTTP/Status/413 모질라 문서에 따르면 413 응답 상태 코드는 요청 엔터티가 서버에 의해 정의된 제한보다 커서 발생하는 에러라고 한다. 흠.. 현재 시간 기준으로 정상작동하는 POST /videos api는 아직 배포가 안되어서 그런가보다. 배포되면 다시 테스트해봐야겠다.

근데 왜 500 에러가 안뜨고 413 에러가 뜨는거지..????

hanbin9775 commented 3 years ago

Content-Type

기존에는 request header의 content-type이 다음과 같이 설정되어있었다.

content-type: application/json;charset=UTF-8

위 콘텐트 타입은 utf-8 인코딩된 json 포맷의 파일을 보낸다는 설정이다. 위 콘텐트 타입으로 동영상같이 크기가 큰 파일을 보낸다고 설정하면 413에러가 발생한다는 사실을 알았다.

axios 함수에 다음과 같은 config 파라미터를 추가해 content-type 헤더를 수정해주자.

headers: {
      'Content-Type': 'multipart/form-data',
    },

하지만 이제 500 error

이제는 500 sever internal 에러가 발생한다. 이 문제를 다시해결해보자

hanbin9775 commented 3 years ago

multipart/form-data 포맷에 맞게 payload 구성하기

박건님이 개발해주신 video post api는 multipart/form-data에 맞는 request만 받아드린다. 그럼 이에 맞는 payload를 작성해야한다. 500에러가 발생했던건 이 포맷에 맞지 않은 payload를 작성했기 때문이다.

인코딩 타입이 multipart/form-data 으로 설정되었을 경우 form에서 사용하는 것과 동일한 포맷을 사용해야 한다. 따라서 json 형태가 아닌 FormData라는 객체로 form을 만들어 보내줘야한다. 구성하는 방법은 다음과 같다.

  const formData = new FormData();
  formData.append('userId', dto.userId);
  formData.append('describe', dto.describe);
  formData.append('category', dto.category);
  formData.append('description', dto.description as string);
  formData.append('video', dto.video as Blob);

FileReader vs File

그리고 내가 계속 헤맸던 부분은 계속 form data에 FileReader로 읽은 파일을 보내려고 했던 것이다. FileReader는 말그대로 파일을 읽어 클라이언트 단에서 볼 수 있게 함이고, 우리가 실제로 보내야하는 것은 FileReader로 읽기 전의 File 그 자체였다.

문제해결

결국 문제 해결! 제대로 api가 작동함을 확인하였다.

SoonGwan commented 3 years ago

한빈님은 정리를 잘 하시는 것 같아 너무 부럽습니다 ㅠㅠㅠㅠㅠㅠ 감사합니다 👍 👍 👍 많은걸 배우고 갑니당

hanbin9775 commented 3 years ago

한빈님은 정리를 잘 하시는 것 같아 너무 부럽습니다 ㅠㅠㅠㅠㅠㅠ 감사합니다 👍 👍 👍 많은걸 배우고 갑니당

헉 도움이 되셨다니 정말 다행입니다. 정리해둔 보람이 있네요 ㅎㅎ

OPGG-HACKTHON / web-e-front