📝 View
- 현재 사진 업로드 페이지의 일부는 다음과 같이 구현되어 있습니다.
<!--사진업로드 Form-->
<form class="upload-form" action="/image" method="POST" enctype="multipart/form-data">
<input type="file" name="file" onchange="imageChoose(this)"/>
<div class="upload-img">
<img src="/images/person.jpeg" alt="" id="imageUploadPreview" />
</div>
<!--사진설명 + 업로드버튼-->
<div class="upload-form-detail">
<input type="text" placeholder="사진설명" name="caption">
<button class="cta blue">업로드</button>
</div>
<!--사진설명end-->
</form>
<!--사진업로드 Form-->
- 여기서는 POST 요청을 통해 전달하는 데이터의 타입이
file
과text
두 개이므로enctype
을multipart/form-data
로 지정해준 모습입니다.
📝 Image
- 이미지 개체는 다음과 같이 구현하였습니다.
package com.cos.photogram.domain.image;
...
@Data
@Builder
@NoArgsConstructor
@AllArgsConstructor
@Entity
public class Image {
@Id @GeneratedValue(strategy = GenerationType.IDENTITY)
private Long id;
@JoinColumn(name = "user_id")
@ManyToOne(fetch = FetchType.LAZY)
private User user;
private String caption;
private String post_image_url; //사진을 전달받아서 서버의 특정 폴더에 저장할 것이므로 사진이 저장된 경로를 저장
private LocalDateTime create_date;
@PrePersist
public void createDate() {
create_date = LocalDateTime.now();
}
}
- 한 명의 사용자는 여러 개의 이미지를 업로드 할 수 있으며 하나의 이미지는 한 명의 사용자에 의해서만 업로드되기 때문에 둘의 연관관계는
@ManyToOne
으로 지정해주었습니다.
📝 Repository
- 사진 업로드 함수를 구현하기 전, 데이터베이스와의 연동을 위한 Repository를 아래와 같이 구현해주었습니다.
package com.cos.photogram.domain.image;
...
public interface ImageRepository extends JpaRepository<Image, Long>{
}
📝 Service
- 이후 서비스 단에서 위에 생성한 Repository를 통해 사진 업로드 로직을 수행합니다.
package com.cos.photogram.service;
...
@RequiredArgsConstructor
@Service
public class ImageService {
private final ImageRepository imageRepository;
@Value("${file.path}")
private String uploadFolder;
public void upload(ImageUploadDto imageUploadDto, PrincipalDetails principalDetails) {
//동일한 사진을 업로드 하였을 때 사진이 덮어씌워지는 것을 방지하기 위함
UUID uuid = UUID.randomUUID();
String imageFileName = uuid + "_" + imageUploadDto.getFile().getOriginalFilename();
Path imageFilePath = Paths.get(uploadFolder + imageFileName);
try {
Files.write(imageFilePath, imageUploadDto.getFile().getBytes());
} catch(Exception e) {
e.printStackTrace();
}
}
}
- 사용자가 업로드 한 사진을 서버에 저장하기 위해 따로 폴더를 생성해주었으며 해당 경로를 알려주기 위해
@Value
어노테이션을 사용하였습니다. 해당 어노테이션은application.yml
파일과 관련되어 있으며 그 구문은 아래와 같습니다.
file:
path: D:/workspace/springboot/upload/
- 즉,
application.yml
파일의file.path
에 설정되어 있는 경로를 가져와uploadFolder
변수에 저장하는 것입니다. - 경로를 직접 지정해줄 수도 있겠으나 굳이 이렇게 한 이유는 이후 경로가 변경되었을 경우 수정을 편하게 하기 위해서입니다.
📝 DTO
- 이제 컨트롤러에서 위에 구현한 함수를 사용하여 업로드를 수행하기만 하면 되는데, 그 전에 먼저 DTO를 생성해주었습니다.
package com.cos.photogram.web.dto.image;
...
@Data
public class ImageUploadDto {
private MultipartFile file;
private String caption;
}
- 해당 DTO는 POST 요청으로
File
과Text
를 전달받아 저장합니다.
📝 Controller
- 이제 컨트롤러에서 업로드를 수행합니다.
package com.cos.photogram.web;
...
@RequiredArgsConstructor
@Controller
public class ImageController {
private final ImageService imageService;
...
@PostMapping("/image")
public String imageUpload(ImageUploadDto imageUploadDto, @AuthenticationPrincipal PrincipalDetails principalDetails) {
imageService.upload(imageUploadDto, principalDetails);
return "redirect:/user/" + principalDetails.getUser().getId();
}
}
- 업로드에 성공할 경우
redirect
하여 사용자 페이지로 돌아가도록 설정하였습니다.
📝 Result
- 사진 업로드를 수행하고 지정한 폴더를 살펴보면 사진이 저장된 것을 확인할 수 있습니다.
'🚗 Backend Toy Project > Photogram' 카테고리의 다른 글
[Photogram] 프로필 페이지 - 뷰 렌더링 (0) | 2022.07.11 |
---|---|
[Photogram] 프로필 페이지 - DB에 이미지 업로드 (0) | 2022.07.11 |
[Photogram] 구독하기 (0) | 2022.07.10 |
[Photogram] 회원정보 수정 (0) | 2022.07.09 |
[Photogram] 로그인 (0) | 2022.07.08 |