Angular 5: 如何上传图片

9 浏览
0 Comments

Angular 5: 如何上传图片

我正在使用Angular 5。\n我有一个需求，需要在页面上上传并显示一张图片。\n有没有Angular 5的标签或HTML标签可以实现这个功能？\n我附上了一个屏幕截图，展示了它的样子。用户点击“上传”按钮后会弹出一个弹窗，用户可以选择要上传的文件。当他们选择文件并点击“打开”按钮后，图片就会显示在页面上。\n任何提示或建议将不胜感激！

0

1 答案

0 Comments

问题：Angular 5 如何上传图片？

解决方法：

在HTML中使用标签，并在组件中定义相应的方法。

代码如下：

public files: any[];
constructor() { 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将保存上传的流。

附注：如果服务器允许，你可以使用属性"multiple"标记HTML，以上传多个数据。

0