Как включить управление загрузкой файлов в реактивную форму Angular2?

по какой-то странной причине в интернете нет учебников или примеров кода, показывающих, как использовать реактивные формы Angular2 с чем-то большим, чем простой ввод или выбор раскрывающихся списков.

мне нужно создать форму, чтобы пользователи могли выбрать свой аватар. (Файл изображения)

следующее не работает. (т. е. свойство Avatar никогда не показывает никакого значения изменения.)

профиль.деталь.HTML-код:

               <form [formGroup]="profileForm" novalidate>
                 
                        <div class="row">
                            <div class="col-md-4 ">
                                <img src="{{imgUrl}}uploads/avatars/{{getUserAvatar}}" style="width:150px; height:150px;float:left;border-radius:50%;margin-right:25px;margin-left:10px;">

                                <div class="form-group">
                                    <label>Update Profile Image</label>
                                    <input class="form-control" type="file" formControlName="avatar">
                                </div>
                            </div>
                            <div class="col-md-8 ">
                                <div class="form-group">
                                    <label >Firstname:
                                        <input class="form-control" formControlName="firstname">
                                    </label>
                                </div>
                                <div class="form-group">
                                    <label >Lastname:
                                        <input class="form-control" formControlName="lastname">
                                    </label>
                                </div>
                                <div class="form-group">
                                    <label >Email:
                                        <input class="form-control" formControlName="email">
                                    </label>
                                </div>
                                <div class="form-group">
                                    <label >Password:
                                        <input class="form-control" type="password" formControlName="password">
                                    </label>
                                </div>
                            </div>
                        </div>
                 
                </form>
                <p>Form value: {{ profileForm.value | json }}</p>
                <p>Form status: {{ profileForm.status | json }}</p>

профиль.деталь.ТС:

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup,  Validators } from '@angular/forms';
import {Config} from '../../services/config.service';
import {AuthService} from '../../services/auth.service';
import {User} from '../../models/user.model';

@Component({
  selector: 'app-profile',
  templateUrl: './profile.component.html',
  styleUrls: ['./profile.component.css']
})
export class ProfileComponent implements OnInit {
  
  authUser:User;

  profileForm : FormGroup; 

  constructor(private authService:AuthService, private fb: FormBuilder) {}
          
  createForm() {
    this.profileForm = this.fb.group({
      firstname:  [this.authUser.firstname, Validators.required ],
      lastname: [this.authUser.lastname, Validators.required ],
      email: [this.authUser.email, Validators.required ],
      avatar: [this.authUser.avatar, Validators.required ],
      password:['xxxxxx', Validators.minLength(4)] 
    });
  }
  ngOnInit() {
    this.authUser = this.authService.getAuthUser();

    this.createForm();
  }
17
angular2-forms file-upload

3 ответов

простой ответ можно найти здесь. https://devblog.dymel.pl/2016/09/02/upload-file-image-angular2-aspnetcore/

HTML-код

    <input #fileInput type="file"/>
    <button (click)="addFile()">Add</button>

компонент.ТС

@ViewChild("fileInput") fileInput;

addFile(): void {
let fi = this.fileInput.nativeElement;
if (fi.files && fi.files[0]) {
    let fileToUpload = fi.files[0];
    this.uploadService
        .upload(fileToUpload)
        .subscribe(res => {
            console.log(res);
        });
    }
}

сервис.ТС

upload(fileToUpload: any) {
    let input = new FormData();
    input.append("file", fileToUpload);

    return this.http.post("/api/uploadFile", input);
}
8

Я немного опоздал, но для всех, кто может прийти сюда в поисках того же решения - Это мой file input accessor это можно использовать с реактивными или управляемыми шаблоном формами. Демо здесь.

С ним есть дополнительная проверка, которая может использоваться для проверки размеров изображения и размера файла, расширения, типа, который по умолчанию отключен.

npm i file-input-accessor и добавить модуль в свой модуль импорт:

import {BrowserModule} from '@angular/platform-browser';
import {FileInputAccessorModule} from "file-input-accessor";

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        FileInputAccessorModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule {}

затем используйте ввод файла, как и любой другой ввод:

<!--Reactive Forms-->
<input type="file" multiple [formControl]="someFileControl" />
<input type="file" multiple formControlName="someFileControl" />

<!--Template-driven-->
<input type="file" name="file-input" multiple [(ngModel)]="fileList" />

вы можете подписаться на свойство valueChanges так же, как и любой другой реактивный элемент управления.

6

вы можете использовать приведенный ниже метод для загрузки изображения в любом типе формы.

предоставьте один метод изменения вашему элементу управления.

<input class="form-control" type="file" name="avatar" (change)="imageUpload($event)">
<img [src]="imageUrl" />

добавить ниже логику в вашем классе.

 // Declare the variable. 
  imageUrl: any;

   //method definition in your class 
    imageUpload(e) {
        let reader = new FileReader();
        //get the selected file from event
        let file = e.target.files[0];
        reader.onloadend = () => {
          //Assign the result to variable for setting the src of image element
          this.imageUrl = reader.result;
        }
        reader.readAsDataURL(file);
      }
    }

после загрузки изображения вы можете использовать этого.url_изображения для обновления модели формы. Для загрузки изображения или файла на сервер вы можете взять ссылку из приведенной ниже ссылки.

как загрузить файл в Angular2

давайте я знаю, работает ли это решение для вас.

5