上傳圖片到Mongo數據庫;從Mongo數據庫下載圖片顯示到前端

/**
     * 上傳一個圖片文件,保存到mongo數據庫中
     * @param doc
     * @param parent  文件所在的目錄
     * @param request
     * @return
     */
    @PostMapping("/uploaddoc")
    public ErrorMessage uploaddoc(MultipartFile doc, @RequestParam String parent, HttpServletRequest request) throws IOException {
        ErrorMessage result = new ErrorMessage();
        MongoDatabase db = mongoTemplate.getDb();
        GridFSBucket bucket = GridFSBuckets.create(db, "docs"); // 打開一個對象,不存在時建立
        GridFSUploadStream uploadStream = bucket.openUploadStream(doc.getOriginalFilename());
        uploadStream.write(doc.getBytes());
        System.out.println(uploadStream.getObjectId());
        uploadStream.close();
      return result;
    }   
/**
     * 下載一個圖片文件,顯示在前端<img>中
     */
    @GetMapping("/downloadImage/{uuid}")
    public void downloadImage(@PathVariable String uuid, HttpServletResponse response) throws IOException {
//        response.setContentType("image/jpg");//顯示,用不着設置它
        MongoDatabase db = mongoTemplate.getDb();
        GridFSBucket bucket = GridFSBuckets.create(db, "docs"); // 打開一個已存在的對象
        // uuid爲圖片文件在Mongo數據庫中的Id
        GridFSDownloadStream downloadStream = bucket.openDownloadStream(new ObjectId(uuid));
        OutputStream outputStream = response.getOutputStream();
        IOUtils.copy(downloadStream, outputStream);
        downloadStream.close();
        outputStream.close();
    }
// 前端部分代碼
// http://localhost:8080/downloadImage/5dca4f1d911b52478896430e 是訪問後端的接口

// 5dca4f1d911b52478896430e是GridFs對象的ObjectId

<img id="img1" src=""> <button onclick="showImage()">get Image</button> <script> function showImage() { document.getElementById('img1').src='http://localhost:8080/downloadImage/5dca4f1d911b52478896430e'; } </script>
相關文章
相關標籤/搜索