角度 5：如何上传图像 [重复]

Question

我使用的是Angular 5。我有一个要求，需要在页面上上传图像并显示图像？

是否有任何角度5标签或html标签我可以这样做？

我附上它看起来像一个屏幕截图。用户点击“上传”按钮，应该有一个弹出窗口，用户选择要上传的文件。选择要上传的文件并点击打开按钮后。图像将出现在页面上？

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

Answer 1

您可以使用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 => ....);
}

表单数据将保存流以进行上传。

另外，你可以用属性“multiple”标记HTML，如果你的服务器可以处理，你可以上传多个数据。