Question

我目前正在尝试将文件从后端（MongoDB）流到前端（使用React）。

我已经搜索了几天，并设法显示了其中一个文件的一半，其余文件甚至都没有显示-这看起来很奇怪，因为它们都是相同的格式（jpeg）。这使我认为我必须错误地上传了它们，但是由于没有出现任何错误，并且我的数据库中正确显示了uploads.files和uploads.chunks，因此我不确定哪里出了问题。

我还尝试在将响应发送到前端之前将readstream更改为base64，但这没有帮助，结果与现在相同（即，我得到一个图像的一半，而其他图像则不显示）。

有没有人可以指出我的错误？

后端（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;

P.S。我已经设置了一个代理，以便每当访问/ api / *时，我的服务器便成为目标。

将图像从MongoDB流传输到浏览器（MERN堆栈）

0 个答案: