我们如何从节点后端获取多个图像到角度前端答案

【问题标题】：Ho do we get multiple images from a node backend to an angular frontend我们如何从节点后端获取多个图像到角度前端
【发布时间】：2021-11-21 13:24:47
【问题描述】：

有没有办法从 nodejs 后端获取多个图像到 Angular 前端。

目前我的代码不能正常工作。但它只将一张图像返回到控制台。（我也不知道如何在网页中显示这个）这也是一个单独的请求来获取图像。所以它认为这是不好的做法

组件

this.vehicleService.getAdvertImage(this.image).subscribe( data => {
        console.log(data);


        const imageURL = URL.createObjectURL(data);
        this.ADImage = imageURL;


          // let reader = new FileReader();
          // reader.onload = (data: any) => {
          //   this.ADImage = data
          // }

      })

Angular 服务文件

  getAdvertImage(image: any): Observable<any>{
     let params = new HttpParams();
     params = params.append('image', image)
    const reqURL = `${this.vehicleURL}/get-ad-image`;
    const getImage = this.http.get<any>(reqURL, { params: params }  )
     return getImage;
  }

NODE api 端点

router.get('/get-ad-image?:image', async (req, res) => {
    const imageURL = req.query.image
    try {
      
        res.download(imageURL)
             
    } catch (error) {
        res.status(404).json({ error })
    }
})

我需要在一个请求中获取几张图片。如果有办法做到这一点，请帮忙。

提前谢谢你

【问题讨论】：

不应该有任何理由一次返回多个图像，特别是如果'/get-ad-image?:image' 端点只处理单个图像，使您的组件可重用并多次调用它。如果您真的想要它，则发送一个数组，将图像提取到内存或文件系统中，然后返回一个将解析为图像的端点数组，然后遍历数组客户端并添加指向端点
@LawrenceCherone 感谢您的回答。如果我每次调用每个帖子的每个图像都会增加服务器上的负载。这就是为什么我不能重新使用该组件来一张一张地获取图像。不确定我是否在这里穿。

标签： javascript node.js angular frontend

【解决方案1】：

我不确定我是否可以帮助你，但也许我可以给你一个正确方向的提示。我将图像放在无头 cms（directus）中，并通过 REST-Api 通过以下方式获取和显示它们：

loadImage(ImageUrl) {
    if(imageID!=null){
      this._directusService.getImgAsBlob(ImageUrl).subscribe(res=>{
        this.createImageFromBlob(res);
      })
    }
  }

getImgAsBlob(ImageUrl) {
  const httpOptions = {
    responseType:'blob' as 'json'
    };
      
   return this._http.get<Blob>(ImageUrl, httpOptions);
}

createImageFromBlob(image: Blob) {
    let reader = new FileReader();
    reader.addEventListener("load", () => {
      this.imageBlobUrl = reader.result;
    }, false);
    if (image) {
      reader.readAsDataURL(image);
    }
  }

在 html 文件中有一个与 imageBlobUrl 的绑定：

<img class="image" [src]="imageBlobUrl">

要获取一些图像，您只需调用 loadImage-method 几次并将您的 Blob 保存到一个数组中。

我希望这对您有所帮助，即使它不是您问题的完美答案。

【讨论】：

嗨，汤姆，谢谢您的回答。我试过这个，但没有用。就像我不确定如何让它发挥作用。但是非常感谢您的帮助。我绝对把我引向了正确的道路。

【解决方案2】：

您需要将res.zip()与express-zip库一起使用，答案可以在here找到。

【讨论】：

您好，谢谢您的回答，请仔细研究一下，让您知道接下来会怎样。