file uplaod할 때 파일을 JSON data로 보낼 수 있나요?

Question

file upload를 하는데, FormData interface를 활용하다가 이번에 Json으로 바꿔보자 하여 바꿔봤는데, 계속 file 부분만 값이 입력되지 않습니다. Json으로는 file upload를 보낼 수 없는 건가요? axios를 활용했습니다.export const onInsertBoardInfo &#61; (board: BoardRequest, fileData: File | undefined) &#61;> { console.log(board, fileData); return instance({ url: '/boards', method: 'post', data: { board, fileData, }, headers: { 'content-type': 'multipart/form-data', }, }); };분명 instance를 만들기 전에는 fileData 값이 뜨는데, 정작 request payload는 {}로 그냥 빈값입니다.ChatGPT에서는 Json으로 파일을 보내면 문자열로 치환되어 파일값을 잃어버린다고 하는데, chatGPT가 틀릴 수도 있으니 한번 고견을 여쭤봅니다.. js의 경우 file upload는 FormData interface를 쓸 수 밖에 없나요?

장독깨기 · Accepted Answer

파일 읽고 base64 인코딩해서 보내보세요.

방황하는젊은이 · Answer

formData 쓰세요

Clickin · Answer

base64 인코딩해서 보내려면 브라우저에서 파일을 전부 메모리에서 올린 다음 백엔드에서 다시 전부 메모리에 올리고 복호화해야하는 문제가 있습니다.파일 용량 커지거나 사용자 많아지면 서버 터져나가기 좋습니다.

장독깨기 · Answer

뿐만 아니라 base64 인코딩하면 용량도 1/3이 커집니다.그니까, 특별한 이유가 없으면 그냥 있는 그대로 전송하는게 낫습니다.그런데, 이런 경우가 있습니다.여기 오키 보면 프로필 사진있죠. 오키에서는 사진 올릴 때 사이즈 제약을 걸었는데요,이렇게 해도 됩니다만, 아무래도 사용자가 좀 불편합니다.이럴때 사용자가 어떤 파일을 올리든지 브라우저에서 사이즈 축소한 다음인코딩해서 보내면 원본 대비 용량을 크게 줄일 수 있습니다.이런 경우에는 당연히 인코딩해서 전송하는게 유리합니다.또한, 썸네일이 필요할 경우에도 서버에서 만들 필요없이 브라우저에서 만들어 전송하면 유리할 수 있습니다.항상 상황을 생각해서 적용하는게 좋겠습니다. :)

file uplaod할 때 파일을 JSON data로 보낼 수 있나요?

4개의 답변

기술 목록