Angular 5：如何上传图片

Question

我正在使用Angular 5。 我需要在页面上传图像并显示图像吗？

我可以做任何Angular 5标签或html标签吗？

我附加了一个屏幕截图。用户点击＆＃34;上传＆＃34;按钮，应该有一个弹出窗口，用户选择要上传的文件。选择要上传的文件后，单击“打开”按钮。图像将显示在页面上？

任何提示或建议都将非常感谢!!

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会保存您上传的流。

P.S。您可以使用以下属性标记HTML：＆＃34; multiple＆＃34;如果您的服务器可以处理它，您可以上传多个数据。

Answer 3

onSubmit() {
    const formData = new FormData();
    formData.append('file', this.fileData);
    this.http.post('url/to/your/api', formData)
      .subscribe(res => {
        console.log(res);
        alert('SUCCESS !!');
      })
  }

您能在这里upload file in angular看到完整的代码吗