Angular 5:如何上传图片

Question

我正在使用Angular 5.我有一个要求,我需要在页面上传图像并显示图像？

是否有任何Angular 5标签或html标签我能做到这一点？

我正在附上一个屏幕截图.用户点击"上传"按钮,应该有一个弹出窗口,用户选择要上传的文件.选择要上传的文件后,单击"打开"按钮.图像将显示在页面上？

任何提示或建议将不胜感激!!

Answer 1

您可以使用以下简单功能执行此操作:

模板:

<img [src]="url" height="200"> <br/>
<input type='file' (change)="onSelectFile($event)">

零件 :

url: string;
onSelectFile(event) { // called each time file input changes
    if (event.target.files && event.target.files[0]) {
      var reader = new FileReader();

      reader.readAsDataURL(event.target.files[0]); // read file as data url

      reader.onload = (event) => { // called once readAsDataURL is completed
        this.url = event.target.result;
      }
    }
}

Answer 2

您可以使用HTML中的标记：

<input type="file" name="file" id="file" (change)="onFileChanged($event)" />

并在组件中：

public files: any[];

contructor() { this.files = []; }

onFileChanged(event: any) {
  this.files = event.target.files;
}

onUpload() {
  const formData = new FormData();
  for (const file of this.files) {
      formData.append(name, file, file.name);
  }
  this.http.post('url', formData).subscribe(x => ....);
}

formData会将流保存到您的上载中。

PS，您可以使用以下属性标记HTML：“多个”，如果服务器可以处理，则可以上传多个数据。