MongoDB और स्प्रिंग बूट का उपयोग करके फ़ाइलें अपलोड करें और पुनर्प्राप्त करें

1. अवलोकन

इस ट्यूटोरियल में, हम चर्चा करेंगे कि MongoDB और स्प्रिंग बूट का उपयोग करके फ़ाइलें कैसे अपलोड और पुनर्प्राप्त करें।

हम MongoDB BSON का उपयोग करेंगे छोटी फ़ाइलों और ग्रिडएफएस . के लिए बड़े लोगों के लिए।

2. मावेन विन्यास

सबसे पहले, हम स्प्रिंग-बूट-स्टार्टर-डेटा-मोंगोडब . जोड़ेंगे हमारे pom.xml . पर निर्भरता :

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-data-mongodb</artifactId>
</dependency>

इसके अलावा, हमें स्प्रिंग-बूट-स्टार्टर-वेब . की आवश्यकता होगी और स्प्रिंग-बूट-स्टार्टर-थाइमलीफ़ हमारे एप्लिकेशन के यूजर इंटरफेस को प्रदर्शित करने के लिए निर्भरता। ये निर्भरताएं थाइमलीफ के साथ हमारे स्प्रिंग बूट गाइड में भी दिखाई गई हैं।

इस ट्यूटोरियल में, हम स्प्रिंग बूट संस्करण 2.x का उपयोग कर रहे हैं।

3. स्प्रिंग बूट गुण

इसके बाद, हम आवश्यक स्प्रिंग बूट गुणों को कॉन्फ़िगर करेंगे।

आइए 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) को कैसे अपलोड और पुनर्प्राप्त किया जाए ।

यहाँ, हमारे पास एक साधारण दस्तावेज़ है कक्षा — फ़ोटो। हम अपनी छवि फ़ाइल को बीएसओएन . में संग्रहीत करेंगे बाइनरी :

@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 . के लिए , हमारे पास केवल दो तरीके होंगे:

• फ़ोटो जोड़ें () — एक फ़ोटो अपलोड करने के लिए मोंगोडीबी को
• getPhoto() — एक फ़ोटो . को पुनः प्राप्त करने के लिए दी गई आईडी के साथ

@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. बड़ी फ़ाइलें अपलोड करना

अब, हम ग्रिडएफएस का उपयोग करेंगे बड़ी फ़ाइलें अपलोड और पुनर्प्राप्त करने के लिए।

सबसे पहले, हम एक साधारण डीटीओ को परिभाषित करेंगे - वीडियो - एक बड़ी फ़ाइल का प्रतिनिधित्व करने के लिए:

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

PhotoService . के समान , हमारे पास एक वीडियो सेवा होगी दो विधियों के साथ — वीडियो जोड़ें () और गेटवीडियो () :

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

ग्रिडएफएस का उपयोग करने के बारे में अधिक जानकारी के लिए स्प्रिंग के साथ, स्प्रिंग डेटा मोंगोडीबी लेख में हमारे ग्रिडएफएस की जांच करें।

6. नियंत्रक

अब, नियंत्रकों पर एक नज़र डालते हैं — PhotoController और वीडियो नियंत्रक ।

6.1. फोटो नियंत्रक

सबसे पहले, हमारे पास 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() भी है किसी दिए गए आईडी के साथ फ़ोटो पुनर्प्राप्त करने के लिए:

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

ध्यान दें कि चूंकि हमारे पास छवि डेटा बाइट[] के रूप में वापस आ गया है , हम इसे एक Base64 . में बदल देंगे स्ट्रिंग इसे सामने के छोर पर प्रदर्शित करने के लिए।

6.2. वीडियो नियंत्रक

इसके बाद, आइए हमारे वीडियो नियंत्रक पर एक नज़र डालते हैं ।

इसकी एक समान विधि होगी, 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() है एक वीडियो को पुनः प्राप्त करने के लिए दी गई आईडी . के साथ :

@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 बनाएगी इनपुटस्ट्रीम :

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