Bagaimana cara menyertakan kontrol unggah file dalam formulir reaktif Angular2?

Untuk beberapa alasan yang aneh, tidak ada tutorial atau contoh kode online yang menunjukkan cara menggunakan formulir Reaktif Angular2 dengan apa pun yang lebih dari sekadar masukan sederhana atau pilih dropdown.

Saya perlu membuat formulir untuk memungkinkan pengguna memilih avatar mereka. (File gambar)

Berikut ini tidak berfungsi. (yaitu properti Avatar tidak pernah menunjukkan perubahan nilai apa pun.)

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();
  }
Pemrograman
file-upload angular2-forms
17 April 2017 в 2:45
Belum ada tampilan
Larutan

Jawaban sederhana dapat ditemukan di sini. https://devblog.dymel.pl/2016/09/02/upload-file-image-angular2-aspnetcore/

HTML

    <input #fileInput type="file"/>
    Add

Komponen.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);
        });
    }
}

Layanan.ts

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

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

Saya agak terlambat dalam hal ini, tetapi bagi siapa pun yang mungkin datang ke sini mencari solusi yang sama - Ini adalah pengakses input file saya yang dapat digunakan dengan formulir Reaktif atau yang digerakkan oleh Templat. Demo di sini.

Ada beberapa validasi opsional yang disediakan dengannya yang dapat digunakan untuk memeriksa dimensi gambar dan ukuran file, ekstensi, jenis, yang dinonaktifkan secara default.

npm i file-input-accessor dan tambahkan modul ke impor AppModule Anda:

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

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

Kemudian gunakan input file Anda seperti input lainnya:


<input type="file" multiple [formControl]="someFileControl" />
<input type="file" multiple formControlName="someFileControl" />


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

Anda dapat berlangganan properti valueChanges seperti kontrol reaktif lainnya.

Komentar (1)

Anda dapat menggunakan metode di bawah ini untuk mengunggah gambar dalam semua jenis formulir.

Paparkan satu metode perubahan ke kontrol Anda.

<input class="form-control" type="file" name="avatar" (change)="imageUpload($event)">

Tambahkan logika di bawah ini di kelas Anda.

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

Setelah gambar diunggah, Anda dapat menggunakan this.imageUrl untuk memperbarui model formulir Anda. Untuk mengunggah gambar atau file ke server Anda dapat mengambil referensi dari tautan di bawah ini.

https://stackoverflow.com/questions/35985347/how-to-upload-file-in-angular2?rq=1

Beri tahu saya jika solusi ini bekerja untuk Anda.

Community
Jawaban edit 23 Mei 2017 в 12:18
Komentar (4)