Блог

Я создаю форму, которая принимает файл в качестве входных данных (attchment) и отображает текущие вложения определенного пользователя. Как часть этого, я получаю данные вложения после загрузки моего компонента.

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

Я обнаружил, что мы не можем напрямую сохранять изображения в БД, вместо этого я сохранил изображения в своей БД с помощью Multer и сохранил ссылку в своей БД. Это было бы более уместно.