類型“ArrayBuffer”不可分配給類型“string”

Question

使用angular6和node.js的應用遇到了一個問題，就是現在在寫服務器端負責上傳圖片的部分，創建了imagePreview = ""變量（是的，默認為空）

ERROR in src/app/categories-page/categories-form/categories-form.component.ts(74,7): error TS2322: Type 'string | ArrayBuffer' is not assignable to type 'string'. [1] Type 'ArrayBuffer' is not assignable to type 'string'.

74行就是這樣，我不明白錯誤在哪里（WebStorm強調reader.result ）

reader.onload = () => {
      this.imagePreview = reader.result
    }

請告訴我如何解決

負責下載圖片的組件代碼：

import {Component, ElementRef, OnInit, ViewChild} from '@angular/core';
import {ActivatedRoute, Params} from "@angular/router";
import {FormControl, FormGroup, Validators} from "@angular/forms";
import {CategoriesService} from "../../shared/services/categories.service";
import {switchMap} from "rxjs/operators";
import {of} from "rxjs";
import {MaterialService} from "../../shared/classes/material.service";
import {Category} from "../../shared/interfaces";

@Component({
  selector: 'app-categories-form',
  templateUrl: './categories-form.component.html',
  styleUrls: ['./categories-form.component.css']
})
export class CategoriesFormComponent implements OnInit {

  @ViewChild('input') inputRef: ElementRef
  form: FormGroup
  image: File
  imagePreview=''
  isNew= true
  category: Category

  constructor(private route: ActivatedRoute,
              private categoriesService: CategoriesService) { }

  ngOnInit() {
    this.form=new FormGroup({
      name:new FormControl(null, Validators.required)
    })

    this.form.disable()

    this.route.params
      .pipe(
        switchMap(
          (params: Params)=>{
            if(params['id']){
              this.isNew=false
              return this.categoriesService.getById(params['id'])
            }
            return of (null)
          }
        )
      )
      .subscribe(
        (category: Category)=>{
          if(category){
            this.category = category
            this.form.patchValue({
              name: category.name
            })
            this.imagePreview=category.imageSrc
            MaterialService.updateTextInputs()
          }

          this.form.enable()
        },
        error=>MaterialService.toast(error.error.message)
      )
  }

  triggerClick(){
    this.inputRef.nativeElement.click()
  }

  onFileUpload(event: any){
    const file = event.target.files[0]
    this.image = file

    const reader = new FileReader()

    reader.onload = () => {
      this.imagePreview = reader.result as string
    }

    reader.readAsDataURL(file)
  }

  onSubmit(){

    let obs$

    this.form.disable()

    if(this.isNew){
      obs$ = this.categoriesService.create(this.form.value.name, this.image)
    } else {
      obs$ = this.categoriesService.update(this.category._id, this.form.value.name, this.image)
    }

    obs$.subscribe(
      category =>{
        this.category = category
        MaterialService.toast('Изменения сохранены!')
        this.form.enable()
      },

      error=>{
        MaterialService.toast(error.error.message)
        this.form.enable()
      }
    )
  }
}

創建和編輯

create(name: string, image?:File) : Observable<Category>{
    const fd = new FormData()

    if(image){
      fd.append('image', image.name)
    }

    fd.append('name', name)
    return this.http.post<Category>('/api/category', fd)
  }

  update(id: string, name: string, image?:File) : Observable<Category>{

    const fd= new FormData()
    if(image){
      fd.append('image', image.name)
    }
    fd.append('name', name)
    return this.http.patch<Category>(`/api/category/${id}`, fd)
  }

Answer 1

ArrayBuffer as string 可能會導致數據截斷（必須測試）。
所以你必須明確地轉換它，告訴編譯器“我知道我在做什么”。

試試這個，它對我有用：

reader.onload = () => {
    this.imagePreview = reader.result as string;
}