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

Question

有没有办法从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
// }
}) 

角度服务文件

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

我需要在一个请求中获得几个图像。如果有办法的话，请帮忙。

提前感谢

Answer 1

我不确定我是否能帮助你，但也许我可以给你一个正确方向的提示。我有我的图像在无头厘米(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方法几次，然后将Blob保存到数组中。

我希望这对你有一点帮助，尽管这不是你问题的完美答案。

Answer 2

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