sql >> データベース >  >> NoSQL >> MongoDB

MongoDBとSpringBootを使用したファイルのアップロードと取得

    1。概要

    このチュートリアルでは、MongoDBとSpringBootを使用してファイルをアップロードおよび取得する方法について説明します。

    MongoDB BSONを使用します 小さなファイルと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のガイドにも示されています。

    このチュートリアルでは、SpringBootバージョン2.xを使用しています。

    3。スプリングブートのプロパティ

    次に、必要なSpringBootプロパティを構成します。

    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 BSON を使用して小さなファイル(サイズ<16MB)をアップロードおよび取得する方法について説明します。 。

    ここに、簡単なドキュメントがあります。 クラス—写真。 画像ファイルをBSONに保存します バイナリ

    @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()写真をアップロードするには MongoDBへ
    • getPhoto()写真を取得する 指定されたIDで
    @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 –ビデオを定義します –大きなファイルを表す場合:

    public class Video {
        private String title;
        private InputStream stream;
    }

    PhotoServiceに似ています 、 VideoService 2つのメソッドを使用— addVideo() およびgetVideo()

    @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; 
        }
    }

    GridFSの使用の詳細については Springについては、SpringDataMongoDBの記事でGridFSを確認してください。

    6。コントローラー

    それでは、コントローラーを見てみましょう— PhotoController およびVideoController

    6.1。 PhotoController

    まず、 PhotoControllerがあります PhotoServiceを使用します 写真を追加/取得するには

    addPhoto()を定義します 新しい写真をアップロードして作成する方法 :

    @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に変換します 文字列 フロントエンドに表示します。

    6.2。 VideoController

    次に、 VideoControllerを見てみましょう。 。

    これには同様のメソッド、 addVideo()があります 、動画をアップロードするには MongoDBへ:

    @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

    @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()を追加することもできます ビデオからストリーミングURLを作成するメソッド InputStream

    @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>

    同様に、 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>

    1. MongoDB C#:IDシリアル化の最良のパターン

    2. 次のストップ–エッジからインサイトへのデータパイプラインの構築

    3. Redis:リストまたはソートされたセットのニュースフィードをファンアウトしますか?

    4. Redisはシングルスレッドですが、同時I / Oをどのように実行しますか?