Angular 在Safari 8中，文件上载始终返回NULL

我整天都在努力让它工作，在Chrome、Opera和Firefox中工作。在狩猎中不起作用

一旦一个值在反应式表单中发生更改，在所有工作的浏览器中，该值都会发生更改，并设置我试图上传的图像的文件路径

这是我在工作时看到的：

{
  "status": 1,
  "feed_type": null,
  "title": "",
  "sub_title": "",
  "description": "",
  "text_content": "",
  "author_name": "",
  "author_avatar": "C:\\fakepath\\icon.png",<-- path is bound to form
  "video_url": "",
  "header_image": null,
  "featured_image": null,
  "twitter": "",
  "facebook": "",
  "instagram": "",
  "advertising_banner": null,
  "ad_link": ""
}

无法解决这个问题…完全被难住了

过去有没有人遇到过这种情况

{
  "status": 1,
  "feed_type": null,
  "title": "",
  "sub_title": "",
  "description": "",
  "text_content": "",
  "author_name": "",
  "author_avatar": null,<-- path is not bound to form
  "video_url": "",
  "header_image": null,
  "featured_image": null,
  "twitter": "",
  "facebook": "",
  "instagram": "",
  "advertising_banner": null,
  "ad_link": ""
}

<img class="placeholder" 
     *ngIf="selectedAvatarImage; else image_placeholder"
     [src]="imageUrl + selectedAvatarImage.url"><-- this is the preview, once it's succssfully been returned after upload
    <div class="file_wrapper">
        <input 
              type="file" 
              formControlName="author_avatar" 
              id="author_avatar"
              (change)="fileProgress($event)" 
              accept=".jpg,.svg,.png,.jpeg"
              required>
        <button class="update" (click)="uploadImage('author_avatar', selectedAvatarImage)"
              [style.background-color]="'#' + config.secondary_color.data.hex_code"
              [style.font-family]="config.header_font.data.font_family">Upload
        </button>
    </div>
    <div class="invalid-feedback" 
    *ngIf="errorHandler('author_avatar', 'required') && submitted">
     An Author image is required
    </div>

selectedAvatarImage: Image = null;
selectedFeaturedImage: Image = null;
selectedAdvertImage: Image = null;
selectedHeaderImage: Image = null;

ngOnInit() {
  this.articleCreate = this.formBuilder.group({
      status: 1,
      feed_type: [this.selectedFeed, [Validators.required]],
      title: ['', [Validators.required, Validators.minLength(20)]],
      sub_title: ['', [Validators.required, Validators.minLength(20)]],
      description: ['', [Validators.required, Validators.minLength(80)]],
      text_content: ['', [Validators.required, Validators.minLength(300)]],
      author_name: ['', [Validators.required, Validators.minLength(3)]],
      author_avatar: [this.selectedAvatarImage, FileValidatorDirective.validate],
      video_url: [''],
      header_image: [this.selectedHeaderImage],
      featured_image:[this.selectedFeaturedImage, FileValidatorDirective.validate],
      twitter: [''],
      facebook: [''],
      instagram: [''],
      advertising_banner: [this.selectedAdvertImage, FileValidatorDirective.validate],
      ad_link: ['', Validators.required]
    })
  })
}

get form() {
  return this.articleCreate.controls;
}

fileProgress(fileInput: any) {
  this.fileData = <File>fileInput.target.files[0];
}

    uploadImage(key: string, imageFile) {
    this.startLoading();
    this.uploading = true;
    if (null) {
      return alert('Please choose an image first')
    }
    imageFile = this.fileData;
    let reader = new FileReader();
    reader.readAsDataURL(imageFile);
    reader.onload = () => {
      let data = reader.result;
      this.configService.uploadImage({
        title: imageFile.name,
        name: imageFile.name,
        type: imageFile.type,
        size: imageFile.size, data
      }).subscribe(response => {
        this.stopLoading();
        imageFile = response.data;
        switch (key) {
          case 'author_avatar': this.selectedAvatarImage = response.data;
          console.log(this.selectedAvatarImage);
          this.articleCreate.controls['author_avatar'].setValue(this.selectedAvatarImage);
            break;
          case 'featured_image': this.selectedFeaturedImage = response.data;
            break;
          case 'advertising_banner': this.selectedAdvertImage = response.data;
            break;
          case 'header_image': this.selectedHeaderImage = response.data;
        }
      });
      setTimeout(() => {
        this.uploading = false;
      }, 2000);
    }
  };

export class Image {
    id: number;
    url: string;
    name: string;
    title: string;
}