Question

我一直在努力使它整日工作，可以在Chrome，Opera和Firefox中使用。在Safari中不起作用。

一旦值以反应形式更改，则在所有工作的浏览器中，该值都会更改，并设置我要上传的图像的文件路径。

这是我工作时看到的：

{
  "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": ""
}

但是在Safari中：

{
  "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": ""
}

在对uploadImage作出响应之后，我尝试了patchValues，setValues，以获取要在safari中更改的图像上传值，但这是行不通的。这基本上意味着，使用Safari时无法发送表单，因为所有图像值都被设置为null，并且验证程序将阻止发送表单。

我已经输入了很多代码来演示它是如何工作的，但是如果您认为需要更多信息，请在我将头撞到墙上时问一下。我从不知道Safari这么难。

.html -图片上传

<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>

.ts -反应形式，上载更改事件，上载图像方法

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

因此，图像被选择并上传，控制台中没有错误。但是当表格的其余部分完成时，例如文本输入选择下拉列表等，即使this.selectedAvatarImage等已安装到位，图像验证也会失败。

我尝试将图像上传时的值设置为路径，但是Safari返回无效状态错误，我尝试在change事件中对值进行修补，再次相同。在发送它们之前，我似乎无法设置这些值。

在大多数方法中，Safari返回错误的错误状态或对象处于无效状态。下降的对象如下所示：这是图像类：

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

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

过去有人遇到过吗？

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

0 个答案: