错误：类型“字符串|ArrayBuffer”上不存在属性'split'。 类型“ArrayBuffer”上不存在属性'split'。

Question

我正在尝试按照教程将图像转换为Base64格式，当我从Angular 6项目上传图像时。当我点击提交按钮时，我可以获取输出值： "base64编码"，并且我也可以通过使用“将您的Base64转换为图像”将代码转换为图像来获得相同的图像。 但是，在代码中，它显示“属性'split'在类型'string | ArrayBuffer'上不存在。类型'ArrayBuffer'上不存在属性'split'。”的错误并将split用红色下划线标出。我也尝试了类似的问题和答案。但这无法消除错误。

我的代码如下：

import {Component, ElementRef, ViewChild} from '@angular/core';
import {FormBuilder, FormGroup, Validators} from "@angular/forms";

@Component({
  selector: 'base64-upload',
  templateUrl: './base64-upload.component.html'
})
export class Base64UploadComponent {
  form: FormGroup;
  loading: boolean = false;


  @ViewChild('fileInput') fileInput: ElementRef;

  constructor(private fb: FormBuilder) {
    this.createForm();
  }

  createForm() {
    this.form = this.fb.group({
      name: ['', Validators.required],
      avatar: null
    });
  }

  onFileChange(event) {
    let reader = new FileReader();
    if(event.target.files && event.target.files.length > 0) {
      let file = event.target.files[0];
      reader.readAsDataURL(file);
      reader.onload = () => {
        this.form.get('avatar').setValue({
          filename: file.name,
          filetype: file.type,
          value: reader.result.split(',')[1]
        })
      };
    }
  }

  onSubmit() {
    const formModel = this.form.value;
    this.loading = true;
    // this.http.post('apiUrl', formModel)
    setTimeout(() => {
      console.log(formModel);
      alert('done!');
      this.loading = false;
    }, 1000);
  }

  clearFile() {
    this.form.get('avatar').setValue(null);
    this.fileInput.nativeElement.value = '';
  }

}

我的HTML代码是：

<form [formGroup]="form" (ngSubmit)="onSubmit()">
  <div class="form-group">
    <label for="name">Name</label>
    <input type="text" class="form-control" id="name" placeholder="Bob" formControlName="name">
  </div>

  <div class="form-group">
    <label for="avatar">Avatar</label>
    <input type="file" id="avatar" (change)="onFileChange($event)"  #fileInput>
    <button type="button" class="btn btn-sm btn-default" (click)="clearFile()">clear file</button>
  </div>

  <button type="submit" [disabled]="form.invalid || loading" 
                        class="btn btn-success">Submit <i class="fa fa-spinner fa-spin fa-fw" *ngIf="loading"></i>
  </button>

</form>

- Denuka

---

你用的是哪个编辑器？因为我在 VS Code 编辑器中没有看到任何错误。 - Pramod Patil

我正在使用Visual Studio Code版本：1.26.1，Node.js版本：8.9.3。 - Denuka

我已经创建了一个 stackblitz。 - Denuka

我刚刚检查了 StackBlitz，没有发现任何问题。请告诉我，您使用的是哪个版本的 Node？ - Pramod Patil

Answer 1

您需要将要拆分的值转换为相应类型。

(<string>reader.result).split(',')[1]

- solo

---

我已经在使用它来获取值。value: reader.result.split(',')[1] - Denuka