如何使用node.js下载角度图像？

Question

在这里我有一个图像并单击该图像它打开菜单，在菜单中的一个下载选项，单击下载按钮我想下载此图像如何可能？ （imageUrl位于代码控制台下方）。 当我点击下载时，我想打开另存为，并在我的电脑上下载图像

HTML

<mat-menu #contextMenu="matMenu">
  <ng-template matMenuContent let-item="item">
    <button mat-menu-item (click)="downloadFile(item)">Download</button>
    <button mat-menu-item>Delete</button>
    <button mat-menu-item>Rename</button>
  </ng-template>
</mat-menu>

TS

folderObj : Folder = new Folder();

downloadFile(item) {
 this.folderObj.folderName = `${this.commonUrlObj.commonUrl}/${item.urloffolder}/${item.imageName}`;
 console.log(this.folderObj.folderName); // http://127.0.0.1:3000/122/122/733/15.jpg (this is imageUrl)
}

Answer 1

您可以使用锚标记检查波纹管代码

<a download href="{{commonUrlObj.commonUrl}}/{{item.urloffolder}}/{{item.imageName}}">Download</a>

Answer 2

使用文件保护程序，我们可以做到这一点，我希望这段代码是有用的

TS

 folderObj : Folder = new Folder();
 constructor(private userService : UserService){}
 import { saveAs} from 'file-saver';

downloadFile(item){
  let index = this.uploadedImagesObj.findIndex( x => x.imageName ===  item.imageName);
  var filename = this.uploadedImagesObj[index].imageName;
  this.userService.downloadFile({'filename': filename,'urloffolder' : item.urloffolder}).subscribe(
    (data) => {
      if(data && data != undefined && data != null){
        saveAs(data,filename);
      }
    }
  )
}

服务

import { HttpClient, HttpHeaders } from '@angular/common/http';

downloadFile(file){
  return this.httpClient.post('http://127.0.0.1/downloadFile',file,{
    responseType : 'blob',
    headers : new HttpHeaders().append('content-type','application/json')
  });
}

app.js（node.js代码）

app.post('/downloadFile',function(req,res,next){
  filepath = path.join(__dirname,'./public/'+req.body.urloffolder+'/'+req.body.filename);
  res.sendFile(filepath);
});

Answer 3

将img路径添加到a href和img src并添加download属性，如<a href="imagepath" download="downloaded filename">

如果不起作用，请发表评论。

<div class="img-wrap">
    <img  src="imagepath"/>
    <i class="fa fa-download" aria-hidden="true">
        <a href="imagepath" download="downloaded filename"></a>
    </i>
</div>