장고 리액트 파일 트랜스퍼 전송 인풋 파일
onClick={() => {
console.log(uploadedFile);
console.log(inputs);
const formData = new FormData();
formData.append('image', inputs.image);
formData.append('name', inputs.name);
formData.append('slug', inputs.slug);
formData.append('description', inputs.description);
formData.append('color', inputs.color);
partyCreate(formData)
.then((res) => {
console.log(res);
})
.catch((err) => {
console.log(err);
});
}}
export const partyCreate = (req: any) => {
return API.post(`/`, req, {
headers: {
'Content-Type': 'multipart/form-data',
},
});
};
formData 형태로 전송하고, API 호출 시 content-type을 위와 같이 수정해줘야함
const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const { name, value } = e.target;
setInputs({
...inputs,
[name]: value,
});
if (name == 'slug') {
getCheckPartyID(value)
.then((res) => {
console.log('Party ID 유효성 체크', res.data);
})
.catch((err) => {
console.log(err);
});
}
console.log(inputs);
};
위에는 input 관련 상태 변경 시 호출되는 함수임.
최종 제출할 때에는 폼데이터에 담아서 줌