angular - Angular：无法在“FileReader”上执行“readAsDataURL”：参数 1 不是“Blob”类型

Question

我试图在以角度 2 裁剪图像后上传图像，但 fileReader 返回错误，指出文件不是 blob 类型。

这是html：

    <input type="file"
           accept="image/*"
           (change)="processFile($event)">

<button *ngIf="imageChangedEvent" (click)="uploadImage()"
                                  type="button">Upload Image</button>

<image-cropper
    [imageChangedEvent]="imageChangedEvent"
    [maintainAspectRatio]="true"
    [aspectRatio]="4 / 3"
    [resizeToWidth]="422"
    format="png"
    (imageCropped)="imageCropped($event)"
></image-cropper>

ts文件：

class FileSnippet{
  static readonly IMAGE_SIZE={width:750,height:422}
  constructor(public src:string,public file:File){}
}
//component starts
  selectedFile:FileSnippet;
  imageChangedEvent:any;
  imageCropped(file:File){
    if(this.selectedFile){
      return this.selectedFile.file=file;
    }
    return this.selectedFile= new FileSnippet('',file);
  }
  processFile(event:any){
    this.selectedFile=undefined;
    const URL=window.URL;
    let file,img;
    if((file=event.target.files[0]) && (file.type==='image/jpeg' || file.type==='image/png')){
      img=new Image();
      const self=this;
      img.onload=function(){
        if(this.width>FileSnippet.IMAGE_SIZE.width && this.height>FileSnippet.IMAGE_SIZE.height){
          self.imageChangedEvent=event; 
        }
      }
      img.src=URL.createObjectURL(file);
    }else{
    }
  }

  uploadImage(){
    if(this.selectedFile){
      const reader=new FileReader();
      reader.addEventListener('load',(event:any)=>{
        //upload image using service
      });
      reader.readAsDataURL(this.selectedFile.file);

    }
  }
}

当我尝试上传文件而不裁剪它们时，fileReader 工作正常。有任何想法吗？

标签： angulartypescript