Question

我有一个场景，我必须使用带有表单数组的反应式表单动态创建多个文件上载字段，并以角度5或角度反应式表单上载该特定字段的多个图像，并且图像必须与该表单字段平行显示名称。请使用堆栈闪电战中的任何示例代码或通过任何链接为我提供帮助。还有

谢谢。

Answer 1

您可以使用formData进行文件上传。

    const formData: FormData = new FormData();
    formData.append('file1', file1, file1.name);
    formData.append('file2', file2, file2);
    this.http.post(url, formData);

并在

中使用change事件

<input type="file" (chnage)="onChange($event)">，您可以获取所选文件的图像源。

这里

public fileList: FileList;
public imageUrls: any[];
public files: any[];

 public onChange(event) {
    if (event.target.files.length === 0) {
      return;
    }
    this.fileList = event.target.files;
    for (let i = 0; i < this.fileList.length; i++) {
      const file = this.fileList[i];
      if (!file.type.match('image')) {
        continue;
      }
      this.files.push(file);
      const picReader = new FileReader();
      picReader.onload = (e: any) => {
        const picFile = e.target;
        this.imageUrls.push(picFile.result);
      };
      picReader.readAsDataURL(file);
    }
  }

在模板中

  <input type="file"
           (change)="onChange($event)"
           placeholder="Upload file"
           accept="image/*" multiple>
    <p>(You may choose more than one file to upload.)</p>
    <ng-container *ngFor="let item of imageUrls; let i = index">

      <img [src]="item" height="100" class="img-thumbnail">
    </ng-container>

这只是一个想法。只需尝试一下。

多个字段Angular 5的图像上传

1 个答案: