사파리 파일 업로드, 한글 파일 깨짐 이슈

기존의 파일 업로드 방식으로는

모바일 사파리 브라우저에서

한글 파일 깨짐 이슈가 발생햇다.

 

// 기존의 간단한 파일 업로드
const formConfig = (form: FormData) => ({ 
  headers: { 'Content-Type': 'multipart/form-data;' },
});

const pdfForm = new FormData();
pdfForm.append('file', state.teaser);
await axios.post('/common/pdf/upload', pdfForm, formConfig(teaserForm));

 

항상 한글깨짐 이슈는 UTF-8 인코딩과

연관되어 있던던 과거의 경험에 의해

issue 트랙킹을 한 결과

 

아래와 같이 약간의 옵션을 추가해줌으로써

한글 깨짐에 대처할 수 있었다.

 

// 기존의 간단한 파일 업로드
const formConfig = (form: FormData) => ({ 
  headers: { 'Content-Type': 'multipart/form-data; charset: UTF-8;' },
  transformRequset: [function() {
    return form;
  }]
});

const pdfForm = new FormData();
pdfForm.append('file', state.teaser);
await axios.post('/common/pdf/upload', pdfForm, formConfig(teaserForm));