执行操作时如何显示存储在 mongoDB 中的图像文件

Posted 2023-03-07

【中文标题】执行操作时如何显示存储在 mongoDB 中的图像文件

【英文标题】：How to display image files stored in mongoDB when an action is performed

【发布时间】：2020-12-06 00:26:25

【问题描述】：

我正在构建一个表单，它接受文件作为输入（附件）并显示特定用户的当前附件。 作为其中的一部分，我会在加载组件后获取附件数据。

base64,255,216,255,224,0,16,74,70,73,70,0,1,1,1,0,96,0,96,0,0,255,219,0,67,0,5,4,4,4,4,3,5,4,4,4,6,5,5,6,8,13,8,8,7,7,8,16,11,12,9,13,19,16,20,19,18,16,18,18,20,23,29,25,20,22,28,22,18,18,26,35,26,28,30,31,33,33,33,20,25,36,39,36,32,38,29,32,33,32,255,219,0

数据以上面的形式显示。 然而，相同的数据在我的数据库中显示为以下格式。

attachments
:
Binary('/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAUEBAQEAwUEBAQGBQUGCA0ICAcHCBALDAkNExAUExIQEhIUFx0ZFBYcFhISGiMaHB4f...', 0)

我能够在客户端控制台中以 base64 格式显示数据。 点击查看图片时，如何转换为链接？

路线：

 app.get(
    apiConfig.config.apiVersion + "/get/attachments",

    bugController.getAttachmentsById
  ); 

控制器：

let getAttachmentsById = async (req, res) => 
  let tracker = await bugModel.findById(req.query.id);
  await tracker.populate("attachments").execPopulate();
  res.set("Content-type", "image/jpg");
  let apiResponse = response.generate(false, null, 200, tracker.attachments);
  res.send(apiResponse);
;

客户端组件：

  public getAttachments() 
    this.Http.getAttachments().subscribe((response) => 
      this.bufferAttach =
        'data:image/jpg;base64,' + response['data'][0]['attachments']['data'];
      this.base64attach = this.bufferAttach.toString('base64');
      console.log('ttchedDAta');
      console.log(this.base64attach);
    );
  

【参考方案1】：

我发现我们不能直接将图像存储在数据库中，而是我使用 Multer 将图像存储在我的数据库中，并将链接存储在我的数据库中。这样比较合适。