我尝试将图像裁剪为角度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可以正常工作。有什么想法吗?