在花费了很多时间寻找答案后,我终于在这个网站
Angular HttpClient Blob 找到了一个漂亮的答案,解决了如何从我的 Node.js API restful 服务器下载简单图像到 Angular 组件应用程序的问题。它基本上包括以下内容:
API Node.js restful:
public getImage( req: Request, res: Response) {
if (!req.params.file) {
return res.status(httpStatus.badRequest).json({
ok: false,
msg: 'File param not found.'
})
}
const absfile = path.join(STORE_ROOT_DIR,IMAGES_DIR, req.params.file);
if (!fs.existsSync(absfile)) {
return res.status(httpStatus.badRequest).json({
ok: false,
msg: 'File name not found on server.'
})
}
res.sendFile(path.resolve(absfile));
}
Angular 6测试组件服务(在我的例子中为EmployeeService):
downloadPhoto( name: string) : Observable<Blob> {
const url = environment.api_url + '/storer/employee/image/' + name;
return this.http.get(url, { responseType: 'blob' })
.pipe(
takeWhile( () => this.alive),
filter ( image => !!image));
}
模板
<img [src]="" class="custom-photo" #photo>
组件订阅者和使用:
@ViewChild('photo') image: ElementRef;
public LoadPhoto( name: string) {
this._employeeService.downloadPhoto(name)
.subscribe( image => {
const url= window.URL.createObjectURL(image);
this.image.nativeElement.src= url;
}, error => {
console.log('error downloading: ', error);
})
}
downloadFile(....)
函数发布吗? - Sanoj_V