[JS] 서버에 이미지 보내기

서버와 json으로 통신은 편리하지만 이미지가 들어가면 조금 복잡해진다..

FormData를 이용해 보내야 한다.

 

 

const handleImage = () =>{

const formData = new FormData(); // FormData 생성
formData.append('multer에서 쓸 이름', event.target.files[0]);
        
// formData는 그냥 콘솔로 안보여서 value 확인하는 방법
// console.log(formData) 하면 아무것도 안나온다.
// for (let value of formData.values()) { 
// 	console.log(value);
// }

// 서버에 formData 보내기
const response = await axios.post('/api~~', formData);

}

 

 

여기부터 출처 multer github

https://github.com/expressjs/multer/blob/master/doc/README-ko.md

 

이제 form 데이터를 받아와 서버에서 multer 라이브러리를 이용해 처리 할 수 있다.

먼저 라이브러리를 설치해 준다,

yarn add multer

이제 multer를 사용할 js 파일로 가서 

const upload = multer({
	storage: multer.diskStorage({
		destination: function (req, file, cb) {
			cb(null, '파일을 저장할 폴더 directory');
		},
		filename: function (req, file, cb) {
			cb(null, '저장될 파일의 이름을 정함');
		},
	}),
});


router.post('/api', upload.single('위에서 append한 것'), (req, res) => {
	// 이제 req.file을 불러와 안에 있는 값들을 사용할 수 있다.
});

 

 

req.file 에서 불러올 수 있는 것

fieldname	폼에 정의된 필드 명
originalname	사용자가 업로드한 파일 명
encoding	파일의 엔코딩 타입
mimetype	파일의 Mime 타입
size	파일의 바이트(byte) 사이즈
destination	파일이 저장된 폴더	DiskStorage
filename	destination 에 저장된 파일 명	DiskStorage
path	업로드된 파일의 전체 경로	DiskStorage
buffer	전체 파일의 Buffer	MemoryStorage

 

이를 이용해 이미지 업로드 및 사용이 가능하다.