Потоковое изображение из MongoDB в браузер (стек MERN) - PullRequest
Новая
       67

Потоковое изображение из MongoDB в браузер (стек MERN)

0 голосов
/ 26 апреля 2020

В настоящее время я пытаюсь передать файл из моего бэкэнда (MongoDB) в мой веб-интерфейс (используя React).

Я искал несколько дней, и мне удалось отобразить половину одного из моих файлов, а остальные даже не отобразятся - что кажется странным, поскольку все они имеют одинаковый формат (jpeg). Это заставляет меня думать, что я, должно быть, загружаю их неправильно, но я не уверен, в чем я ошибаюсь, поскольку я не получаю никаких ошибок, и uploads.files & uploads.chunks правильно отображаются в моей базе данных.

I Я также пытался изменить поток чтения в base64 перед отправкой ответа в веб-интерфейс, но это не помогает, тот же результат, что и сейчас (т.е. я получаю половину одного изображения, а остальные не отображаются).

Есть ли кто-нибудь, кто может указать на мои ошибки?

Backend (imageRoutes. js): 

const mongoose = require('mongoose');
const multer  = require('multer');
const GridFsStorage = require('multer-gridfs-storage');

const conn = mongoose.createConnection(
    keys.mongoURI,
    { 
        useNewUrlParser: true, 
        useUnifiedTopology: true
    });

let gridFSBucket;
conn.once('open', async () => {
    gridFSBucket = await new mongoose.mongo.GridFSBucket(conn.db, {bucketName: 'uploads'}); 
})

const storage = new GridFsStorage({ 
    db: conn,
    file: (req, file) => {
    if (file.mimetype === 'image/jpeg') {
      return {
        filename: 'file_' + Date.now(),
        bucketName: 'uploads'
      };
    } else {
      return null;
    }
  } 
});

const upload = multer({ storage: storage });

module.exports = app => {
    app.get('/api/img', (req, res) => {
        const readstream = gridFSBucket.openDownloadStreamByName("file_1587913620326");
        console.log(readstream)
        readstream.pipe(res);
    });   

    app.post('/api/upload', upload.array('files', 10), (req, res) => {
            res.send(req.files);
    });
};

Внешний интерфейс: 

import React from 'react';

class ImgDisplay extends React.Component {

    render() {
        return(
            <div className="flex w-100 justify-center">
                <img className="w-30 h-30" src="/api/img" alt="image1" />
            </div>
        )
    }   
}

export default ImgDisplay;

PS Я настроил прокси-сервер таким образом, чтобы при каждом посещении / api / * сервер становился целевым.

...