-
질문 & 답변
카테고리
-
세부 분야
풀스택
-
해결 여부
미해결
이미지 업로드를 리액트 드롭존으로 구현하려고 하는데 잘안되서요
22.02.01 17:14 작성 조회수 144
0
안녕하세요
김시훈 강사님 질문이 있습니다.
질문1
메인 페이지의 파일 업로드 컴퍼넌트 로직이 좀 이상해서 봐주시면 감사요 특히 폼데이터 설정 부분이 폼 데이터를 지우고 다시 설정하는데
좀더 좋은 방법이 있을까요?
// set file data to form Object and axios request to file upload to server
const onSubmit = async (e) => {
e.preventDefault()
console.log('submit 함수 실행 check')
const formData = new FormData()
// if (files != null) {
// console.log("files : ", files);
// for (let file of files) {
// formData.append("image", file);
// }
// } else {
// alert("파일을 선택해 주세요");
// return;
// }
try {
await Promise.all(
[...files].map((file, index) => {
formData.delete('image');
formData.append("image", file);
const res = axios.post("/upload", formData, {
headers: { 'Content-Type': 'multi/form-data' },
onUploadProgress: (e) => {
setPercent((prevData) => {
const newData = [...prevData];
newData[index] = Math.round((100 * e.loaded) / e.total);
return newData;
})
}
})
console.log({ res })
})
)
await toast.success('success!!')
setTimeout(() => {
setPercent([]);
setFileNames([]);
}, 2000)
} catch (err) {
toast.error('fail!')
console.log(err)
}
}
질문2
드롭존 페이지에서 파일 업로드가 안되는데 원인을 잘 모르겠습니다
한번 봐주시면 감사하겠습니다.
github:
https://github.com/hyunsokstar/making-daum-file-upload
server 실행 명령어
npm run dev
front 서버 실행 명령어
npm start
main page:
dropzone page:
http://127.0.0.1:3000/dropzone
노트 정리:
http://www.skilnote-for-react.co.kr/wm/myshortcut/making-daum-file-upload/27
답변을 작성해보세요.
답변 0