Angular 2格式数据为空

Question

我无法将数据传递给 FormData。我搜索过。但我无法理解。请你帮助我好吗。 我的目标;使用 web API 2 保存图像文件。我还没有写更多的 wep api 2。

我找不到解决方案。还有其他使用方法吗？

我的组件

let fp = new fileUploadParametre();
let formData: FormData = new FormData();
var file; 

if ($('#fileinput')[0] != undefined) {
  if ($('#fileinput')[0].files.length > 0) {
    file = $('#fileinput')[0].files[0];
    formData.append('uploadingFile', file);
    //fp.fileName = file.name;
    console.log(formData);
  }
  formData.append('siparisid', this.siparis.siparisid);
  formData.append('dokumantipi',this.form.controls.belgeTipiFormController.value);
  formData.append('aciklama',this.form.controls.aciklamaFormController.value);

  this.fileUploadService.kaydet(
    formData
  )
    .subscribe(result => {
      console.log(result);
      if (result === true) {
        this.errorMessages = [];
        this.dialogRef.close(true)
      }
      else
        this.errorMessages = ['Kayıt Yapılamadı'];
    },
    err => {
      if (err.status == 0) {
        this.errorMessages = ['Bağlantı hatası! sunucuya erişilemedi.'];
      }
      else if (err.status == 404) {
        this.errorMessages = ['Bağlantı hatası! sunucuya erişilemedi.'];
      }
      else if (err.status == 401) {
        this.errorMessages = ['Yetki Hatası.'];
      }


      else if (err.status == 400) {
        let errBody = JSON.parse(err._body);
        if (errBody
          && errBody['error'] == 'invalid_grant')
          this.errorMessages = ['Oturum Açılamadı Geçersiz Kullanıcı veya Şifre'];
        else
          this.errorMessages = [errBody.message];
      }
      else
        this.errorMessages = [err.statusTest]

    }
    );
}


 **my Service**

 public kaydet(
  formData: FormData
 ): Observable<any> {

let postFiles = {
  formData: formData
};

return this.http.post(
  this.apiUrl + '/dokumanlar/ResimKaydet',
  JSON.stringify(postFiles)
)
  .map(res => res.json());
}

formData=formData {} >> 这样是空的。

Answer 1

要将 image(avatar) 发送到服务器或 web api，您可以使用 FormData，如果您想达到此目的，请逐步完成以下工作:

1. 在 html 文件中使用 #avatar 访问组件中的 ElementRef:

   <form (ngSubmit)="onSubmit()">
       <input type="file" accept=".png, .jpg, .jpeg" #avatar>
   </form>
   

---

1. 创建组件并用于发送图片到服务器；

   import {Component} from '@angular/core';
   import {ElementRef} from '@angular/core';
   import {ViewChild} from '@angular/core';
   
   import {HttpClient} from '@angular/common/http';
   import {HttpParams} from '@angular/common/http';
   import {HttpHeaders} from '@angular/common/http';
   
   @Component({
       selector: 'app-avatar',
       templateUrl: './avatar.component.html',
       styleUrls: ['./avatar.component.css']
   })
   export class AvatarComponent {
       @ViewChild('avatar') avatar: ElementRef;
   
       constructor(private http: HttpClient) { }
   
       onSubmit() {      
           const formData = new FormData();
           formData.append('avatar', 
                           this.avatar.nativeElement.files[0], 
                           this.avatar.nativeElement.files[0].name);
   
           const headers = new HttpHeaders();
           headers.append('Content-Type', 'multipart/form-data');
           headers.append('Accept', 'application/json');
           this.http.post('api/upload', formData, {headers: headers})
               .subscribe(
                   (response) => {
                   },
                   (error) => {
                   }                   
                );
        }
   
   }
   

Notice to adding file to FormData like below method with parameters

formData.append(name, fileValue, fileName)