Question

我试图模仿Facebook让用户使用Reactive Forms在Angular上传照片的方式。

这是组件的html：

<form [formGroup]="houseForm" (ngSubmit)="submitForm()">
   <div class="form-group col-md-4">
     <label for="name">Name :</label>
     <input id="name" placeholder="Name" formControlName="name">
   </div>
   <div formArrayName="photos" *ngFor="let item of photos.controls;index as i ">

     <img [src]="url" alt="some text" style="width: 100px ; height: 100px;"/>
     <input type="file"  placeholder="photo ...." (change)="onFileChange($event , i)" >
   </div>


  <button type="submit" >Submit</button>
</form>
<button class="btn btn-primary" (click)="addPhoto()">Add Photo</button>

我的组件代码

tempArray = [];
  url =  [];
  houseForm: FormGroup;
  constructor(private fb: FormBuilder) {
    this.houseForm = this.fb.group({
      name: [''] ,
      photos: new FormArray([
        new FormControl()
      ])
    });
    }
    get photos(): FormArray { return <FormArray>this.houseForm.get('photos'); }

    addPhoto(): void {
    this.photos.push(new FormControl());
  }
  onFileChange(event , i) {
       const fileRead = new FileReader();
         if (!!this.tempArray[i]) {
             this.tempArray[i] = event.target.files[0].name;
             } else {
           this.tempArray.splice(i, 0, event.target.files[0].name);

         }
         fileRead.readAsDataURL(event.target.files[0]);
         fileRead.onload = (ev: any)=>{
           this.photos.patchValue([
             this.tempArray
           ]);
            this.url[i] = ev.target.result;
         };
         }
         
         
submitForm() {
     const formData = new FormData();
     formData.append('name' ,  this.houseForm.get('name').value);
     formData.append('photos' , this.houseForm.get('photos').value);
     setTimeout(() => {
       console.log('form classic ' + this.houseForm.get('photos').value );
      alert('done!');

    }, 1000);
  }

问题是，只有在我选择文件后，所有<img>都会显示该图片，所以我需要一种方法来保存该照片，只要我点击另一张照片即可。

另外我使用临时数组来上传一个formControl，不确定它是否是最好的方法并且这样做，而且html中的那个循环不确定它是否是最佳方式。

无论如何，我想避免使用带有多个的输入，因为很多用户在选择照片时不太喜欢按Ctrl键。

Answer 1

我发现了问题;问题出在我的html [src]应该是url[i]而不是url。

Angular 4上传照片（像Facebook一样）

1 个答案: