表单数据不使用 Angular 4 附加值/图像答案

【问题标题】：Form data not appending values/image using Angular 4表单数据不使用 Angular 4 附加值/图像
【发布时间】：2019-02-11 19:31:33
【问题描述】：

朋友们你好，我在 Angular 4 中创建了一个项目，我想上传图像并向 PHP 文件发送请求，但表单数据无法附加值和图像。请帮我我包括FormGroup、FormControl、FormBuilder、Validators、Http

const Image = this.com_Image.nativeElement;
if (Image.files && Image.files[0]) {
  this.comImageFile = Image.files[0];
}
const ImageFile: File = this.comImageFile;

// [enter image description here][1]
let formData = new FormData();
formData.append('companyName', value.companyName);
formData.append('username', value.username);
formData.append('uploadFile', ImageFile, ImageFile.name);

console.log(formData);

【问题讨论】：

您是否可以选择将其作为 base64 字符串发送？
不，我在我的表单数据中找不到结果

标签： php angular

【解决方案1】：

HTML

<input #fileSelect type="file" class="form-control" (change)="onFileChanged($event)" accept=".jpg, .png"/>

组件

export class FileUploadComponent {
  @ViewChild('fileSelect') fileSelectInput: ElementRef;

  fileToUpload: any;

  onFileChanged(event) {
    // https://stackoverflow.com/questions/13602039/e-srcelement-is-undefined-in-firefox
    this.fileToUpload = (event.srcElement || event.target).files; 
    let formData: FormData = new FormData();
    formData.append('file', this.fileToUpload[0]);
    this.createOrUpdateResource(formData);   
  }

  // https://stackoverflow.com/questions/48059121/angular4-file-upload-put-request-fails, 
  so making this POST
  private createOrUpdateResource(formData: FormData) {
    this.http.post<any>(`http://localhost:8080/upload`, formData).subscribe((res) => {
      //success
    }, error => {
      //error
    });
  }
}

【讨论】：

我有一个疑问，兄弟 formdata append 在没有图片上传的情况下也无法正常工作
@James 你所说的表单数据附加不起作用是什么意思？
无法在表单数据中附加值

【解决方案2】：

您是否尝试仅传递图像的名称和值？

对于文件管理（通常），这对我有用：

formData.append('uploadFile', ImageFile);

【讨论】：

formdata append 在没有图片上传的情况下也无法正常工作