Question

我已经输入数据用户详细信息first_name，last_name，phone_number和profile_pic，但是文件没有以其他表单数据上传？我如何上传带有其他表单数据的文件？

user-form.component.ts

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { Router } from '@angular/router';
import { HttpClient } from '@angular/common/http';
import { UserService } from '../user.service';
import { FileUploader, FileSelectDirective } from 'ng2-file-upload/ng2-file-upload';

@Component({
  selector: 'user-form',
  templateUrl: './user-form.component.html',
  styleUrls: ['./user-form.component.scss']
})
export class UserFormComponent {
  angForm: FormGroup
  router: Router;

  constructor(private userservice: UserService, private fb: FormBuilder, private _route: Router) {
    this.createForm();
    this.router = _route;
  }

  createForm() {
    this.angForm = this.fb.group({
      first_name: ['', Validators.required],
      last_name: ['', Validators.required],
      // email: ['', Validators.required,Validators.email],
      email: ['', Validators.compose([Validators.required, Validators.email])],
      phone_number: ['', Validators.compose([Validators.required, Validators.maxLength(10)])],
      profile_pic:[]
    });
  }


  addUser(first_name, last_name, email, phone_number,profile_pic) {
    var data = {
      first_name: first_name,
      last_name: last_name,
      email: email,
      phone_number: phone_number,
      profile_pic: profile_pic,
    }
    console.log(data);

    // this.uploader.onAfterAddingFile = (file) => { file.withCredentials = false; }

    // public uploader :  FileUploader;

    // uploader.onAfterAddingFile = (file) => { file.withCredentials = false; }
    this.userservice.addUser(data);
    this.router.navigate(['/pages/users/list']); //Redirection path
  }
}

user-form.component.html

<div class="row justify-content-center">
  <div class="col-lg-8">
    <nb-card>
      <nb-card-header>Add User</nb-card-header>
      <nb-card-body>
        <!-- <div [formGroup]="form"> -->
          <form [formGroup]="angForm" novalidate>
            <div class="row full-name-inputs form-group">
              <div class="col-sm-6 input-group">
                <input type="text" placeholder="First Name" formControlName="first_name" class="form-control" #firstName/>
              </div>
              <div *ngIf="angForm.controls['first_name'].invalid && (angForm.controls['first_name'].dirty || angForm.controls['first_name'].touched)" class="alert alert-danger" >
                <div *ngIf="angForm.controls['first_name'].errors.required">
                  First Name is required.
                </div>
              </div>
              <div class="col-sm-6 input-group">
                <input type="text" placeholder="Last Name" formControlName="last_name" class="form-control" #lastName/>
              </div>
              <div *ngIf="angForm.controls['last_name'].invalid && (angForm.controls['last_name'].dirty || angForm.controls['last_name'].touched)" class="alert alert-danger" >
                <div *ngIf="angForm.controls['last_name'].errors.required">
                  Last Name is required.
                </div>
              </div>
            </div>
            <div class="form-group input-group">
              <input type="email" placeholder="Email" formControlName="email" class="form-control" #email/>
            </div>
            <div *ngIf="angForm.controls['email'].invalid && (angForm.controls['email'].dirty || angForm.controls['email'].touched)" class="alert alert-danger" >
              <div *ngIf="angForm.controls['email'].errors.required">
                Email is required.
              </div>
              <div *ngIf="angForm.controls['email'].errors.email">
                  Enter valid email.
                </div>
            </div>
            <div class="form-group input-group">
              <input type="number" placeholder="Phone Number" formControlName="phone_number" class="form-control" #phoneNumber/>
            </div>
            <div *ngIf="angForm.controls['phone_number'].invalid && (angForm.controls['phone_number'].dirty || angForm.controls['phone_number'].touched)" class="alert alert-danger" >
              <div *ngIf="angForm.controls['phone_number'].errors.required">
                Phone Number is required.
              </div>
              <div *ngIf="angForm.controls['phone_number'].errors.maxLength">
                  Phone Number must be 10 digits
                </div>
            </div>
            <div class="form-group input-group">
              <input type="file" class="form-control file-data" formControlName="profile_pic" #profilePic />
            </div>
            <div class="input-group">
              <!-- <input type="submit" class="btn btn-success btn-rectangle btn-demo ml-auto submit-btn" name="Submit" > -->
              <button (click)="addUser(firstName.value, lastName.value,email.value,phoneNumber.value,profilePic.value);" [disabled]="angForm.pristine || angForm.invalid" class="btn btn-success btn-rectangle btn-demo ml-auto submit-btn">Submit</button>
            </div>
          </form>
        <!-- </div> -->
      </nb-card-body>
    </nb-card>

  </div>

</div>

使用表单数据通过其他表单输入上传文件时

字符串和文件通过表单数据上传到REST API。有人可以为此建议吗？预先感谢。

Answer 1

尝试下面的代码以上传带有文件的数据。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="menu">
  <li>Element 1</li>
  <li>Element 2</li>
  <li>Element 3</li>
</ul>

Angular 6文件上传以及其他表单数据

1 个答案: