MongoDBとSpringBootを使用したファイルのアップロードと取得
1. 概要
このチュートリアルでは、MongoDBとSpring Bootを使用してファイルをアップロードおよび取得する方法について説明します。
小さいファイルにはMongoDBBSON を使用し、大きいファイルにはGridFSを使用します。
2. Maven構成
まず、 spring-boot-starter-data-mongodb依存関係をpom.xmlに追加します。
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-mongodb</artifactId>
</dependency>
さらに、アプリケーションのユーザーインターフェイスを表示するには、 spring-boot-starter-webおよびspring-boot-starter-thymeleafの依存関係が必要です。 これらの依存関係は、Thymeleafを使用したSpringBootのガイドにも示されています。
このチュートリアルでは、Spring Bootバージョン2.xを使用しています。
3. スプリングブートプロパティ
次に、必要なSpring Bootプロパティを構成します。
MongoDBプロパティから始めましょう。
spring.data.mongodb.host=localhost
spring.data.mongodb.port=27017
spring.data.mongodb.database=springboot-mongo
また、大きなファイルをアップロードできるようにサーブレットマルチパートプロパティを設定します。
spring.servlet.multipart.max-file-size=256MB
spring.servlet.multipart.max-request-size=256MB
spring.servlet.multipart.enabled=true
4. 小さなファイルのアップロード
次に、MongoDBを使用して小さなファイル(サイズ<16MB)をアップロードおよび取得する方法について説明します。 BSON 。
ここでは、単純な Document クラス—Photo。画像ファイルをBSONBinaryに保存します。
@Document(collection = "photos")
public class Photo {
@Id
private String id;
private String title;
private Binary image;
}
そして、単純なPhotoRepositoryがあります。
public interface PhotoRepository extends MongoRepository<Photo, String> { }
ここで、 PhotoService の場合、メソッドは2つだけになります。
- addPhoto() — PhotoをMongoDBにアップロードします
- getPhoto() —指定されたIDのPhotoを取得します
@Service
public class PhotoService {
@Autowired
private PhotoRepository photoRepo;
public String addPhoto(String title, MultipartFile file) throws IOException {
Photo photo = new Photo(title);
photo.setImage(
new Binary(BsonBinarySubType.BINARY, file.getBytes()));
photo = photoRepo.insert(photo); return photo.getId();
}
public Photo getPhoto(String id) {
return photoRepo.findById(id).get();
}
}
5. 大きなファイルのアップロード
次に、 GridFS を使用して、大きなファイルをアップロードおよび取得します。
まず、大きなファイルを表すために、単純なDTO – Video –を定義します。
public class Video {
private String title;
private InputStream stream;
}
PhotoService と同様に、 VideoService には、 addVideo()と getVideo()の2つのメソッドがあります。
@Service
public class VideoService {
@Autowired
private GridFsTemplate gridFsTemplate;
@Autowired
private GridFsOperations operations;
public String addVideo(String title, MultipartFile file) throws IOException {
DBObject metaData = new BasicDBObject();
metaData.put("type", "video");
metaData.put("title", title);
ObjectId id = gridFsTemplate.store(
file.getInputStream(), file.getName(), file.getContentType(), metaData);
return id.toString();
}
public Video getVideo(String id) throws IllegalStateException, IOException {
GridFSFile file = gridFsTemplate.findOne(new Query(Criteria.where("_id").is(id)));
Video video = new Video();
video.setTitle(file.getMetadata().get("title").toString());
video.setStream(operations.getResource(file).getInputStream());
return video;
}
}
SpringでGridFSを使用する方法の詳細については、Spring DataMongoDBのGridFSの記事を確認してください。
6. コントローラー
それでは、コントローラー— PhotoControllerとVideoControllerを見てみましょう。
6.1. PhotoController
まず、 PhotoControllerがあり、PhotoServiceを使用して写真を追加/取得します。
addPhoto()メソッドを定義して、新しいPhotoをアップロードして作成します。
@PostMapping("/photos/add")
public String addPhoto(@RequestParam("title") String title,
@RequestParam("image") MultipartFile image, Model model)
throws IOException {
String id = photoService.addPhoto(title, image);
return "redirect:/photos/" + id;
}
また、 getPhoto()を使用して、指定されたIDの写真を取得できます。
@GetMapping("/photos/{id}")
public String getPhoto(@PathVariable String id, Model model) {
Photo photo = photoService.getPhoto(id);
model.addAttribute("title", photo.getTitle());
model.addAttribute("image",
Base64.getEncoder().encodeToString(photo.getImage().getData()));
return "photos";
}
画像データはbyte[] として返されるため、 Base64 Stringに変換してフロントエンドに表示することに注意してください。 。
6.2. VideoController
次に、VideoControllerを見てみましょう。
これには、 VideoをMongoDBにアップロードするための同様のメソッドaddVideo()があります。
@PostMapping("/videos/add")
public String addVideo(@RequestParam("title") String title,
@RequestParam("file") MultipartFile file, Model model) throws IOException {
String id = videoService.addVideo(title, file);
return "redirect:/videos/" + id;
}
そして、ここに getVideo()があり、指定されたidでVideoを取得します。
@GetMapping("/videos/{id}")
public String getVideo(@PathVariable String id, Model model) throws Exception {
Video video = videoService.getVideo(id);
model.addAttribute("title", video.getTitle());
model.addAttribute("url", "/videos/stream/" + id);
return "videos";
}
streamVideo()メソッドを追加して、 Video InputStreamからストリーミングURLを作成することもできます。
@GetMapping("/videos/stream/{id}")
public void streamVideo(@PathVariable String id, HttpServletResponse response) throws Exception {
Video video = videoService.getVideo(id);
FileCopyUtils.copy(video.getStream(), response.getOutputStream());
}
7. フロントエンド
最後に、フロントエンドを見てみましょう。 uploadPhoto.html から始めましょう。これは、画像をアップロードするための簡単なフォームを提供します。
<html>
<body>
<h1>Upload new Photo</h1>
<form method="POST" action="/photos/add" enctype="multipart/form-data">
Title:<input type="text" name="title" />
Image:<input type="file" name="image" accept="image/*" />
<input type="submit" value="Upload" />
</form>
</body>
</html>
次に、 photos.html ビューを追加して、写真を表示します。
<html>
<body>
<h1>View Photo</h1>
Title: <span th:text="${title}">name</span>
<img alt="sample" th:src="*{'data:image/png;base64,'+image}" />
</body>
</html>
同様に、VideoをアップロードするためのuploadVideo.htmlがあります。
<html>
<body>
<h1>Upload new Video</h1>
<form method="POST" action="/videos/add" enctype="multipart/form-data">
Title:<input type="text" name="title" />
Video:<input type="file" name="file" accept="video/*" />
<input type="submit" value="Upload" />
</form>
</body>
</html>
そして、ビデオを表示するための videos.html :
<html>
<body>
<h1>View Video</h1>
Title: <span th:text="${title}">title</span>
<video width="400" controls>
<source th:src="${url}" />
</video>
</body>
</html>
8. 結論
この記事では、MongoDBとSpringBootを使用してファイルをアップロードおよび取得する方法を学びました。 BSONとGridFSの両方を使用してファイルをアップロードおよび取得しました。
いつものように、完全なソースコードはGitHubプロジェクトで入手できます。