在上传 Angular 2 之前显示图片答案

【问题标题】：Showing the pic before uploading angular 2在上传 Angular 2 之前显示图片
【发布时间】：2018-04-02 01:21:24
【问题描述】：

我正在使用 ng2fileupload 将图片上传到服务器，代码工作正常，图片正在上传，但我想在将图片发送到服务器以上传我的代码之前显示图片，如下所示

  <img src="" >

  <input type="file" placeholder="Upload file"  ng2FileSelect [uploader]="uploader">
  <button class="btn btn-success btn-s" role="submit" (click)="uploader.uploadAll()" [disabled]="passwordForm.valid">
      Update 
  </button>

我无法获取图像的路径，因此无法将其发送到 img 标签的 src。任何帮助表示赞赏。

【问题讨论】：

也许，您可以在组件的方法中自己处理图像的上传。这样做，我想在发送之前获取图像的路径会更容易。这是link，您可以在其中查看如何上传文件。

标签： angular

【解决方案1】：

这是一篇文章的链接，该链接向您展示了如何做您想做的事。它只是不使用 Angular 来做到这一点。 https://scotch.io/tutorials/use-the-html5-file-api-to-work-with-files-locally-in-the-browser.

基本上，您需要使用文件api将文件转换为数据URL，并将“src”设置为该URL。

【讨论】：