-
질문 & 답변
카테고리
-
세부 분야
풀스택
-
해결 여부
해결됨
비디오 업로드 시에 file change 이벤트 시에 서버 로컬에 파일을 업로드 하잖아요!
20.04.20 04:12 작성 조회수 213
0
안녕하세요 강의 열심히 수강 중인 학생입니다!
좋은 강의 감사합니다.
강의의 비디오 업로드 페이지에서 파일을 선택함으로써 change 감지를 하여 해당 파일을 핸들링하는 이벤트 함수를 정의하였잖아요!
const onFileChange = (e) => {
let files = e.currentTarget.files;
let formData = new FormData;
formData.append('file', files[0]);
const config = {
header: {'content-type': 'multipart/form-data'}
};
axios.post('/api/image/uploadfiles', formData, config)
.then(response => {
if(response.data.success) {
console.log(response.data);
setFilePath(response.data.url);
} else {
alert('이미지 업로드를 실패했습니다.');
setFilePath(undefined);
}
})
.catch(error => {
console.log(error);
});
};
그런데 이 부분에서 문제가 submit 이벤트가 아닌, change 이벤트에서 서버 로컬에 파일을 저장한다는 것입니다.
만일 클라이언트 사용자가 파일을 한 번 선택하고서
잘못 선택했네? 이러면서 다시 다른 파일을 선택 후에
form을 제출하게 되면
DB에는 마지막으로 선택한 파일 정보가 저장이 되지만, 서버를 돌리는 로컬 폴더에는 그 전에 선택한 파일까지도 올라가는 현상이 발행하게 됩니다.
물론, DB 정보만으로 클라이언트 상에 데이터가 뿌려지지만 서버 로컬 폴더에는 클라이언트에 보내지 않을 파일이 잔류하게 됩니다...
이 경우를 어떻게 처리할까요?!
답변을 작성해보세요.
1
John Ahn
지식공유자2020.04.22
안녕하세요 그럴할 경우에는 파일을 처음부터 바로 올리는 것이 아닌 change 이벤트에서는 파일을 그냥 갖고만 있고
submit 할때 데이터를 넘겨주면서 같이 파일도 저장하는 방법도 있습니다 ^^
원하는 방법을 사용하시면 됩니다 ~ !
답변 1