axios multipart/form-data 다중 파일 업로드 관련 질문

Question

axios.post(url, formData, { headers: { 'Content-Type': 'multipart/form-data' }, transformRequest: formData &#61;> formData, })axios 2.6 이상에서는 멀티파트 이런식으로 하라고 되어있는데, 제가 질문할 내용은해당 방식으로 formData를 보내면,const formData &#61; formData.append('file', file); 일 경우리퀘스트가 file: 바이너리file: 바이너리로 찍히는데, 예를 들어서,const data &#61; {id: 1, formData} axios.post(url, data , { headers: { 'Content-Type': 'multipart/form-data' }, transformRequest: formData &#61;> formData, })이런식으로, 멀티파트에 formData 말고 추가로 파라미터를 추가하면,리퀘스트에 [object object] 로 찍히면서, 서버에서 해당 파일을 읽지를 못 하는데...리퀘스트가id : 1file: 바이너리file: 바이너리이런식으로 보낼려면, 어떻게 수정을 해야 할까요?

Clickin · Answer

formData에다가 id도 넣으시면 되죠백엔드 구성은 뭘로 하셨는진 모르겠는데 도움이 될법한 자료 드립니다.https://medium.com/jaehoon-techblog/simpleblog-개발-일지-4-55a8d2a8604

crnmst · Answer

axios를 사용하여 멀티파트/form-data로 파일 업로드를 수행하는 경우, 추가적인 파라미터를 함께 보내려면 FormData 객체에 직접 값을 추가해야 합니다. 예를 들어, id 파라미터를 FormData에 추가하려면 다음과 같이 하면 됩니다:const formData = new FormData();formData.append('file', file);formData.append('id', 1);axios.post(url, formData, { headers: { 'Content-Type': 'multipart/form-data' }, transformRequest: formData => formData,});위의 예제에서 formData 객체에 id 값을 추가했습니다. 이제 요청을 보내면 id와 file이 각각 바이너리로 전송되어 서버에서 읽을 수 있게 됩니다.이렇게 FormData에 값을 추가하면, 요청 페이로드에도 해당 값이 반영됩니다. 따라서 서버 측에서도 id와 file을 올바르게 읽을 수 있어야 합니다.앞서 언급한 것처럼, 추가 파라미터를 FormData에 직접 추가하는 방식은 일반적으로 사용되는 방법입니다. 그러나 서버의 요구사항에 따라 다를 수 있으므로, 서버 개발자에게 요청 형식에 대한 자세한 정보를 확인하는 것이 좋습니다.

axios multipart/form-data 다중 파일 업로드 관련 질문

2개의 답변

#multipartfile 목록