해결된 질문
작성
·
212
0
일단 저는 node.js 서버 환경이 아닌 Springboot 서버 환경이고 front에서 http://localhost:8080/images api로 이미지를 잘 전달 합니다! 그런데 한 번 전달하게 되면
이미지 성공 toast알림이 뜨지 않고 또한 다시 초기화를 해주는 쪽 블럭으로 넘어가지 않는 것 같습니다
코드는 강사님꺼 그대로 가져다 사용하였고 server쪽 url 호출시 cors문제가 있어서 package.json에 proxy 설정해주었고 백엔드 서버에 1번은 제대로 가져오는 것까지 확인하였습니다. < 이게 백엔드에서 file에 대한 정보 찍어봤을 때 나온 결과값입니다.
import React, { useState } from 'react'
import { toast } from "react-toastify"
import axios from 'axios';
... [생략]
const onSubmit = async (e) => {
e.preventDefault();
const formData = new FormData();
formData.append("image", file)
console.log(formData);
try {
const res = await axios.post("http://localhost:8080/images", formData,{
headers: { "Content-Type" : "multipart/form-data" },
onUploadProgress: (e) => {
setProgress(Math.round(100 * e.loaded/e.total));
},
});
toast.success("success!! 이미지 업로드 성공");
setTimeout(() => {
setProgress(0);
setFileName(defaultUpload);
setFileUrl(null);
}, 3000);
} catch (error) {
toast.error(error.message);
setProgress(0);
setFileName(defaultUpload);
setFileUrl(null);
console.error(error);
}
}
왜 try 부분에서 성공시/에러시에 대한 아웃풋을 넘겨주지 않는지 잘 모르겠습니다 ㅠ 답변 부탁드릴게요
현재까지 수강중인 내용은 db를 통해 이미지 정보 저장하기까지 들었습니다
답변 1
0
어디까지 실행되는지 확인해보셨나요?
간단하게는 중간중간에 console.log로 중간값들을 찍어서 확인해볼 수 있어요. 어디서 막혔는지 혹은 어디에 값이 잘못 나왔는지
파일 이미지 업로드 이벤트 핸들러에서 log찍었을때
upload버튼 눌러서 폼데이터 submit해주는 이벤트 함수에서 formdata log를 찍었을때 console에 로그가 찍히는 것을 확인하였으나
업로드 성공 또는 실패에 대한 피드백을 던져주는 블럭에 아예 가지 않는 것 같습니다