037 - 회원가입시 회원이미지 업로드하기
남기용 369

이전에 Passport로 로그인 처리를 하고 회원정보와 토큰을 발급하여서 이제 클라이언트에서 로그인 처리하고 유지 하는걸 해야 했는데

오프라인 모임에서도 같은 내용으로 강의를 하다보니 회원 가입시에 회원 이미지를 같이 받아서 표시하자는 이야기가 나왔습니다.

그래서 오늘은 회원 가입시에 파일을 업로드 해서 전송하는걸 해보도록 할께요

express에서 파일 업로드하는 모듈을 먼저 설치하고 파서를 등록해야 하는데. 나중에 cookie도 사용하기 때문에 파서를 할때.fileupalod 파서와 cookie 파서 두개를 설치하고 설정하도록 할게요

yarn add express-fileupload cookie-parser

설치가 되었으면 server.js에서 파서 부분에 다음과 같이 추가 합니다.

// 파서
const fileUpload = require('express-fileupload');
app.use(fileUpload());
const cookieParser = require('cookie-parser');
app.use(cookieParser());

SignUpForm.vue 파일에 이미지 업로드 필드를 추가합니다.

이미지를 업로드할때는 form 전송시 multipart/formdata 형식으로 보내야 하므로 FormData API를 사용해 객체를 생성하고 전송합니다.

<template>
<!-- 생략 -->
		<v-file-input 
			label="회원이미지"
			v-model="form.mb_image"
			prepend-icon="mdi-account-box"
			accept="image/jpg,image/png"
		/>
<!-- 생략 -->
<template>
<script>
	// 생략
	data() {
		// 생략
		form : {
			// 생략
			mb_image : null,
		}
	}
	methods : {
		async save() {
      this.$refs.form.validate();
      await this.$nextTick();
      if (!this.valid) return;
      if (!this.$refs.id.validate()) return;
      if (!this.$refs.email.validate()) return;

      // this.$emit('onSave', this.form); // 삭제
			const formData = new FormData();
			const keys = Object.keys(this.form);
			for(const key of keys) {
				formData.append(key, this.form[key]);
			}
			this.$emit('onSave', formData);
    },
	}
</script>

이렇게 하면 Join.vue에서는 단순히 form 객체를 받아서 전달하고 결과를 출력할때 form.mb_name을 사용할 수 없으므로 save 함수를 다음과 같이 변경합니다.

// 생략
	async save(form) {
      this.isLoading = true;
      const data = await this.createMember(form);
    	this.isLoading = false;
			if(data) {
				const mb_name = form.get('mb_name');
				this.$toast.info(`${mb_name}님 회원 가입하셧습니다.`);
				this.$router.push('/login');
			}
    },

파일 저장위치를 지정해야 하는데 저는 server/upload/memberPhoto 라는 폴더에 지정하도록 할께요

이 경로를 사용할껀데 이런 경로값들은 전역적으로 쓰일수 있으므로 Node의 전역객체에 값을 지정하고 혹시라도 폴더가 없으면 에러가 발생할 수 있으므로 서버 실행시 폴더를 만들어 주도록 합시다.

// 생략 ... 파서 아래부분에 작성
// 글로벌
global.MEMBER_PHOTO_PATH = path.join(__dirname, './upload/memberPhoto');
fs.mkdirSync(MEMBER_PHOTO_PATH, {recursive: true});

회원이미지는 하나만 존재해야 하므로 업로드된 파일은 회원아이디.jpg 형식으로 저장하도록 하겠습니다.

이제 실체 파일을 업로드 하기 위해 memberModel의 createMember 함수를 다음과 같이 수정합니다.

// 생략...
	async createMember(req) {
		const at = moment().format('LT');
		const ip = getIp(req);
		
		const payload = {
			...req.body,
			mb_level: await getDefaultMemberLevel(),
			mb_create_at: at,
			mb_create_ip: ip,
			mb_update_at: at,
			mb_update_ip: ip,
		}
		// 이미지 업로드 처리
		delete payload.mb_image;
		if(req.files && req.files.mb_image) {
			req.files.mb_image.mv(`${MEMBER_PHOTO_PATH}/${payload.mb_id}.jpg`, (err)=>{
				if(err) {
					console.log("Member Image Upload Error", err);
				}
			});
		}

		payload.mb_password = jwt.generatePassword(payload.mb_password);
		const sql = sqlHelper.Insert(TABLE.MEMBER, payload);
		const [row] = await db.execute(sql.query, sql.values);

		return row.affectedRows == 1;
	},

회원로그인 후 댓글을 작성하실 수 있습니다. 로그인
© 2024 ezcode all right reserved.