如何在 Angular2 反应形式中包含文件上传控件？

Question

出于某种奇怪的原因，除了简单的输入或 select 下拉菜单之外，没有在线教程或代码示例展示如何使用 Angular2 响应式表单。

我需要创建一个表单让用户 select 他们的头像。 (图像文件)

以下无效。（即头像属性从不显示任何值更改。）

profile.component.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>

profile.component.ts:

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();
  }

Answer 1

您可以使用以下方法以任何形式上传图片。

向您的控件公开一种更改方法。

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

在您的 class 中添加以下逻辑。

 // 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);
      }
    }

图片上传后，您可以使用 this.imageUrl 更新表单模型。上传图片或文件到服务器可以参考下面link.

让我知道此解决方案是否适合您。

Answer 2

可以在这里找到简单的答案。 https://devblog.dymel.pl/2016/09/02/upload-file-image-angular2-aspnetcore/

HTML

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

Component.ts

@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);
        });
    }
}

service.ts

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

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

Answer 3

我来晚了一点，但对于可能来这里寻找相同解决方案的任何其他人 - 这是我的file input accessor that can be used with Reactive or Template-driven forms. Demo here。

它提供了一些可选的验证，可用于检查图像尺寸和文件大小、扩展名、类型，默认情况下禁用。

npm i file-input-accessor 并将模块添加到您的 AppModule 导入：

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 属性，就像任何其他响应式控件一样。

如何在 Angular2 反应形式中包含文件上传控件？

How to include a file upload control in an Angular2 reactive form?

file-upload

angular2-forms