[Yelpcamp 프로젝트] 이미지 편집

 

 

이미지 추가

캠핑장 편집 버튼을 누르면 이미지를 추가 할 수 있게 바꿔보자.

1. edit.ejs에서 form에 enctype="multiplart/form-data"를 추가한다. 여러 개의 이미지를 입력받을 수 있게 하기 위해서다.

2. 파일 선택기를 추가한다.

<div class="mb-3">
	<label for="formFileMultiple" class="form-label fw-medium fs-5">Add Images</label><br>
	<input type="file" name="image" id="formFileMultiple" class="form-control" multiple required>
</div>

 

3. 라우트의 put에 upload.array('image') 미들웨어를 추가한다.

4. 캠핑장 편집을 수행하는 controller에 위치한 editCampground 함수에 아래 코드를 추가한다.

const imgs = req.files.map(f => ({ url: f.path, filename: f.filename }));
camp.images.push(...imgs);
await camp.save();

 

 

이미지 삭제

편집 페이지에서 이미지를 보여주고 체크박스로 클릭한 후 업데이트를 누르면 선택된 이미지가 삭제되도록 해보자.

1. edit 페이지에 아래 코드를 추가한다. 체크 박스가 선택되면 deleteImages 배열 안에 이미지의 filename이 담긴다.

 <div class="mb-3">
	<% camp.images.forEach((img, i)=> { %>
		<img src="<%= img.url %>" class="img-thumbnail" alt="">
		<div class="form-check-inline">
			<input type="checkbox" id="image-<%= i %>" name="deleteImages[]" value="<%=img.filename %>">
		</div>
		<label for="image-<%= i %>">Delete</label>
	<% }) %>
</div>

2. editCampground 함수에 아래 코드를 추가한다. deleteImages에 있는 filename으로 cloudinary에 올라가있던 이미지를 삭제한다. 그리고 mongodb에서 이미지 정보를 삭제한다.

if (req.body.deleteImages) {
	for (let filename of req.body.deleteImages) {
		cloudinary.uploader.destroy(filename);
	}
	await camp.updateOne({ $pull: { images: { filename: { $in: req.body.deleteImages } } } });
}

 

 

가상 속성 추가

편집 페이지에서 이미지를 보여줄 때 별도의 설정을 하지 않아서 원본 이미지 크기 그대로 보인다. 이미지의 가로 길이를 조정하기 위해 가상 속성을 추가해보자.

campground 스키마가 정의되어 있는 파일을 아래와 같이 수정하자. cloudinary에서는 upload 뒤에 문자열을 추가해 여러 속성을 지정할 수 있다. 여기서는 가로 길이를 200px으로 할 것이다. thumbnail이라는 가상 속성을 설정한다.

const ImageSchema = new Schema({
    url: String,
    filename: String
});

ImageSchema.virtual('thumbnail').get(function () {
    return this.url.replace('/upload', '/upload/w_200');
});

const CampgroundSchema = new Schema({
    title: {
        type: String,
        required: true
    },
    price: {
        type: Number,
        required: true
    },
    description: {
        type: String
    },
    location: {
        type: String,
        required: true
    },
    images: [ImageSchema],
    reviews: [
        {
            type: Schema.Types.ObjectId,
            ref: 'Review'
        }
    ],
    author: {
        type: Schema.Types.ObjectId,
        ref: 'User'
    }
});

edit.ejs 파일에서 이미지 소스를 img.thumbnail로 수정한다. 이 thumbnail은 아까 만든 가상 속성이다.

 <div class="mb-3">
	<% camp.images.forEach((img, i)=> { %>
		<img src="<%= img.thumbnail %>" class="img-thumbnail" alt="">
		<div class="form-check-inline">
			<input type="checkbox" id="image-<%= i %>" name="deleteImages[]" value="<%=img.filename %>">
		</div>
		<label for="image-<%= i %>">Delete</label>
	<% }) %>
</div>

이미지의 가로 크기가 고정된 것을 확인할 수 있다.