Потоковая передача данных изображения с сервера узла приводит к повреждению файла (gridfs-stream)

Question

Я решил опубликовать это после обширного поиска здесь ( 1 , 2 , 3 ) и здесь ( 1 , 2 ) и много-много других похожих постов.Я теряю надежду, но не сдамся так легко:)

Я использую multer для загрузки изображения PNG в базу данных mongo:

const storage = new GridFsStorage({
    url: 'mongodb://my_database:thisIsfake@hostName/my_database',
    file: (req, file) => {
      return new Promise((resolve, reject) => {
        crypto.randomBytes(16, (err, buf) => {     // generating unique names to avoid duplicates
          if (err) {
            return reject(err);
          }
          const filename = buf.toString('hex') + path.extname(file.originalname);
          const fileInfo = {
            filename: filename,
            bucketName: 'media',
            metadata : {
              clientId : req.body.client_id  // added metadata to have a reference to the client to whom the image belongs
            }
          };
          resolve(fileInfo);
        });
      });
    }
  });
const upload = multer({storage}).single('image');

Затем я создаю поток и каналэто к ответу:

loader: function (req, res) {
    var conn = mongoose.createConnection('mongodb://my_database:thisIsfake@hostName/my_database');
    conn.once('open', function () {
    var gfs = Grid(conn.db, mongoose.mongo);
    gfs.collection('media'); 
    gfs.files.find({ metadata : {clientId : req.body.id}}).toArray(
    (err, files) => {
        if (err) throw err;
        if (files) {
            const readStream = gfs.createReadStream(files[0].filename);  //testing only with the first file in the array
            console.log(readStream); 
            res.set('Content-Type', files[0].contentType)
            readStream.pipe(res);    
        }  
    });  
    });
}

POST-запрос почтальона к конечной точке приводит к отображению тела ответа в виде файла изображения:

В интерфейсе я передаю ответ в объекте File, читаю его и сохраняю результат в атрибуте src img:

findAfile(){
            let Data = {
                id: this.$store.state.StorePatient._id,         
            };
            console.log(this.$store.state.StorePatient._id);
            visitAxios.post('http://localhost:3000/client/visits/findfile', Data )
            .then(res => {
                const reader =  new FileReader();
                let file = new File([res.data],"image.png", {type: "image/png"});
                console.log('this is file: ',file);
                reader.readAsDataURL(file);  // encode a string  
                reader.onload = function() {
                    const img = new Image();
                    img.src = reader.result;
                    document.getElementById('imgContainer').appendChild(img);
                };
            })
            .catch( err => console.error(err));

        }

Мой объект File похож на тот, который я получаю при использовании поля вводатолько больше:

Это оригинальный файл:

При проверке элемента я вижу это:

Похоже, URI данных находится там, где он должен быть, но он отличается от исходного изображения при вводе файла:

Опять же, когда яхочу отобразить его через элемент ввода:

onFileSelected(event){
        this.file = event.target.files[0];
        this.fileName = event.target.files[0].name;
        const reader =  new FileReader();
        console.log(this.file);
        reader.onload = function() {
             const img = new Image();
             img.src = reader.result;
             document.getElementById('imageContainer').appendChild(img);
        };
        reader.readAsDataURL(this.file);   
}

Я получаю это:

Но при чтении изСпонсор, он поврежден:

Почтальон правильно понял, так что, должно быть, что-то не так с моим внешним кодом, верно?Как передать этот поток GFS в мой HTML?

Answer 1

Мне удалось сделать запрос POST, чтобы получить изображение из MongoDB и сохранить его в каталоге сервера:

const readStream = gfs.createReadStream(files[0].filename);
const wstream = fs.createWriteStream(path.join(__dirname,"uploads", "fileToGet.jpg"));        
readStream.pipe(wstream);

Затем я просто сделал простой запрос GET, добавив абсолютный путь к иокончательно удалите файл после успешного ответа:

app.get('/image', function (req, res) {
  var file = path.join(dir, 'fileToGet.jpg');
  if (file.indexOf(dir + path.sep) !== 0) {
      return res.status(403).end('Forbidden');
  }
  var type = mime[path.extname(file).slice(1)] || 'text/plain';
  var s = fs.createReadStream(file);
  s.on('open', function () {
      res.set('Content-Type', type);
      s.pipe(res);
  });
  s.on('end', function () {
      fs.unlink(file, ()=>{
        console.log("file deleted");
      })
  });
  s.on('error', function () {
      res.set('Content-Type', 'text/plain');
      res.status(404).end('Not found');
  });