서버에 이미지 파일 업로드 node.js express axios

Question

이미지 파일을 업로드하여 내 백엔드에 저장하려고했습니다. 반응 프론트 엔드에서 익스프레스 API를 호출하기 위해 axios를 사용하고 있습니다. 포트

프런트 엔드 런 3000 백엔드는

router.post('/update', (req, res, next) => { 
    var data = req.body; 

    console.log(data) // No file data here 

내가 multipart/form-data로 헤더를 설정하려고하면, 난 여전히 비어있는 포트 8080

export function updateSociete(data){ 
return dispatch => { 
    // Init loading... 
    dispatch(setLoading()) 

    console.log(data) // File data is populated 
    axios.post(`${API_ENDPOINT}api/societe/update`, 
     { 
      data: data, 
     }, 
     { headers: { 
      'Content-Type': 'Application/json', 
      'x-access-token': localStorage.getItem('token') 
     } 
    }) 
    .then(function (response) { 
     return response.data 
    }) 
    .then(societe => { 
     // do something 
    }) 
} 

그리고 명시 백엔드를 실행 데이터. Axios가 데이터 객체를 백엔드로 보내면 백엔드는 정상적인 데이터를 수신하고 파일 데이터를 기대합니다. 우편 배달부로 테스트 할 때

, 나는 모든 데이터 파일 등 당신은 formData로 변환 할 수 있습니다

Answer 1

을받을 수 있습니다.

export function updateSociete(data){ 
return dispatch => { 
// Init loading... 
dispatch(setLoading()) 

console.log(data) // File data is populated 
const formData = new FormData(data) 
axios.post(`${API_ENDPOINT}api/societe/update`, 
    { 
     data: formData, 
    }, 
    { headers: { 
     'Content-Type': 'Application/json', 
     'x-access-token': localStorage.getItem('token') 
    } 
}) 
.then(function (response) { 
    return response.data 
}) 
.then(societe => { 
    // do something 
}) 
} 

PS :

당신은 다음을 시도 할 수 있습니다 내가 64 기수로 파일을 변환 juste,이
<form onSubmit={you upload function logic}> .... </form>

지금은 Using_FormData_Objects