Показать изображение по идентификатору в MEAN

Question

Я пытаюсь сохранить изображение в mongoDB и восстановить его для отображения с угловой стороны.

profile.html

<input class="file-hide" type="file" (change)="fileChangeEvent($event)" 
 placeholder="Upload file..." />
 <button type="button" (click)="upload()">Upload</button> 

profile.component.ts

images=[];
    fileChangeEvent(event) {
        this.profileService.uploadAvatar(event); 
       }

      getImage() {
        this.patientService.getImage().subscribe(
          data => this.images = [data],
          error => console.log(error),
        );
      }

profile.service.ts

    uploadAvatar(event){
    let fileList: FileList = event.target.files;
    if(fileList.length > 0) {
     let file: File = fileList[0];
     let formData:FormData = new FormData();
     formData.append('avatar', file, file.name);
     let headers = new Headers();
     /** No need to include Content-Type in Angular 4 */
     // headers.append('Content-Type', 'multipart/form-data');
     // headers.append('Accept', 'application/json');

      this.http.post('/api/images', formData)
         .subscribe(
             data => console.log('success'),
             error => console.log(error)
         )
   }

}
getImage(): Observable<any> {
  return this.http.get(`/api/images/:id`);
}

Серверная сторона

  app.post(/images,(req, res, next) => {
  upload(req, res, function(err) {
  // Create a new image model and fill the properties
  let newImage = new Image();
  newImage.filename = req.file.filename;
  newImage.originalName = req.file.originalname;
  newImage.desc = req.body.desc
  newImage.save(err => {
      if (err) {
          return res.sendStatus(400);
      }
      res.status(201).send({ newImage });
      console.log("uploaded")
  });
})
});

app.get(/images,  (req, res, next) => {
  console.log("Get Image By Id")
  let imgId = req.params.id;

  Image.findById(imgId, (err, image) => {
      if (err) {
          res.sendStatus(400);
      }

      // stream the image back by loading the file
      res.setHeader('Content-Type', 'image/jpeg');

      fs.createReadStream(path.join(UPLOAD_PATH, image.filename)).pipe(res);

  })
});

Модель

export interface IImageModel extends mongoose.Document {
    filename: string; 
    originalName: string; 
    desc: string;
    created: Date;
    url : String
  };

  // Actual DB model
export var imageSchema = new mongoose.Schema({
    filename: String,
    originalName: String,
    desc: String,
    url : String,
    created: { type: Date, default: Date.now }
});
 export const Image = mongoose.model<IImageModel>('Image', imageSchema);

Теперь я могу загрузить файл из моего интерфейса и сохранить его в базе данных. Я могу просматривать изображения по идентификатору с помощью почтальона. Но я хочу отобразить изображение со стороны переднего конца. Я поражен этим. Может ли кто-нибудь помочь мне с отображением изображения, хранящегося в mongoDB.

Answer 1

Вот скриншот ошибки

Answer 2

Если вы хотите получить изображение с использованием идентификатора, то вам нужно получить идентификатор из базы данных, прежде чем вы получите данные из базы данных. измени свой код, как это будет работать

 uploadAvatar(event){
        let fileList: FileList = event.target.files;
        if(fileList.length > 0) {
         let file: File = fileList[0];
         let formData:FormData = new FormData();
         formData.append('avatar', file, file.name);
         let headers = new Headers();
         /** No need to include Content-Type in Angular 4 */
         // headers.append('Content-Type', 'multipart/form-data');
         // headers.append('Accept', 'application/json');


// Once you post the image you will get the back the id
          this.http.post('/api/images', formData)
             .subscribe((img)
                   this.getImage(img.id);
                 data => console.log('success'),
                 error => console.log(error)
             )
       }

    }

    getImage(id): Observable<any> {
      return this.http.get(`/api/images/:id`,{responseType:'blob'});
    }