node.js - 按 MEAN 中的 ID 显示图像

Question

我正在尝试将图像存储在 mongoDB 中并将其检索回以从 Angular 端显示。

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);

现在我可以从前端上传文件并将其存储在数据库中。我可以使用 postman 通过 ID 查看图像。但我想从前端显示图像。我对此感到震惊。任何人都可以帮我显示存储在 mongoDB 中的图像。

Answer 1

这是错误的屏幕截图