如何从Nodejs-Express(MongoDB)存储、访问和检索图片文件到Angular8 FrontEnd。

这是一个员工管理系统,员工的资料图像被上传并存储在API服务器(定义路径)。

我实现了以下步骤。

enter image description here

步骤1:API服务器请求 – API代码示例

router.get('/public/users-images/*', function(req, res) {
var filepath = __dirname +'/..'+req.url
fs.exists(filepath, (exists) => {
  if (exists) {
    var filepath = filepath
 } else {
   var filepath = __dirname +'/../public/users-images/user-image.png'
 }
})
var fileext = filepath.split('.') 
fs.readFile(filepath, function(err, buffer){
// console.log(base64Image);
   var base64Image = new Buffer(buffer, 'binary').toString('base64');
   res.send({img:'data:image/'+fileext[fileext.length -1]+';base64,' + base64Image});
 });
})

第二步:使用管道方法从Angular8发出前端请求。

import { Pipe, PipeTransform } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Pipe({
  name: 'userImages'
})
export class UserImagesPipe implements PipeTransform {
  constructor(
     private http: HttpClient,
     private authenticationService: AuthenticationService
  ) { }

  transform(img_name: string): any {

   this.http.get('/public/users-images/'+img_name).subscribe(result => {
     // You could also cache your result
     return result.img;

   });
  }
}

现在,我的问题是,如何从API服务器的位置访问图像,并在UI屏幕上显示它。我假设使用下面的方法。

Html模板 <img [src]="'user-image.png' | userImages" class="responsive-12">

我用的是 PIPE方法 – 因为用户列表(包括用户信息,包括用户资料图片)将被用于搜索过滤器,任务创建表单等,所以我尝试着用通用的方式来实现它,也许将来有机会通过CDN来实现它。

我这样做是正确的吗?或者说会不会有什么通风口的问题?

解决方案:

你把事情搞得太复杂了。让浏览器做图片的获取。

只需在视图中输出正确的图片路径即可。

<img [src]="'/public/users-images/' + username + '.png'" alt="" />

或者,如果你愿意,你可以为它创建一个管道,但只输出正确的路径。

import { Pipe, PipeTransform } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Pipe({
  name: 'userImages'
})
export class UserImagesPipe implements PipeTransform {
  constructor(
     private authenticationService: AuthenticationService
  ) { }

  transform(img_name: string): any {
    return `/public/users-images/${img_name}.png`
  }
}
<img [src]="username | userImages" alt="" />

给TA打赏
共{{data.count}}人
人已打赏
未分类

如何使用pandas比较一个数据框的1个元素和其他数据框的所有元素?

2022-9-8 16:08:25

未分类

在WebBrowser控件中避免刷新事件?

2022-9-8 16:19:36

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索