input type='file'사용하여 img 업로드해준다- input태그의
accept로 이미지 확장자만 받도록 해준다 onChange()사용하여 데이터의 값을 가져올 수 있다
Preview
직접 서버에 올리고 해당 url을 받아와서 보여주는 식으로도 가능하지만,
이미지 업로드를 몇번이고 유저가 변경을 할 때마다 fetch해서 보여준다면, 그 데이터들이 다 쌓이기도 하는 것이기에 비효율 적이라 생각해서 preview는 직접 구현해보고 작성 완료 버튼 클릭 시에 해당 fetch를 1번만 진행하는것으로 하기로 하였다.
const imgType = ['jpeg', 'jpg', 'png'];
const changePreviewImg = e => {
const { files } = e.target;
if (!imgType.includes(e.target.files[0].type.slice(6))) {
alert('이미지 파일만 업로드가 가능합니다');
return;
}
const imgSrc = URL.createObjectURL(files[0]);
setPreview(imgSrc);
};- input의 files는 배열로 들어오고 0번 인덱스에 이미지가 담긴다.
e.target.files[0].type을 하면 image/png 와 같은 형식으로 들어오기 때문에 slice를 시켜주고 변수 imgType 배열에 들어있는지 확인하여 불리언값을 받아서 유효성검사를 한다- 들어 있으면 통과!
URL.createObjectURL()을 사용하여 src내에 사용할 수 있는 url로 반환해준다.
preview 이미지가 담기는 state를 비우고 input으로 동일한 이미지를 넣어주니 등록이 되지 않았다.
디버깅하며 찾아낸 것이 input에는 아직 기존 입력된 값이 있다는 것.
분명 가져와서 쓸 때에는 files[0]을 쓰는데... value를 비워야 했다...
input type="file" 의 값을 비우려면 value를 비워 주면 된다!
S3 업로드
프론트에서 formData로 보내줘야한다.
const changeFormDataImg = e => {
const formData = new FormData();
formData.append('img', e.target.files[0]);
// formData 담기 생략
});
};new FormData()를 하여 formData 객체를 만들어준다- { 'img' : 파일데이터 }를 append해주면 백엔드에 보내 줄 formData 준비 완료!
formData는 XMLHtpRequest를 사용하여 전송할 키/값 쌍 집합을 컴파일한 특수객체 이기 때문에 문자열로 표현할 수 없어서 console.log(formData)를 하면 빈 객체가 찍힌다.
잘 생성됐는지 확인 방법은for ... of를 사용!
for (const keyValue of formData) console.log(keyValue)
그럼 배열 형태로 보이지만 0인덱스가 formData의 key값, 1인덱스가 formData의 value 다.
- fetch 할 때 body에 FormData만 담아주면 끝
공부하며 정리&기록하는 ._. 씅로그
Front-end