Angular CKEditor图像上传

Question

你好，在angular应用程序中，我正在使用CKEditor。对于图像上传，我使用下面的代码

演示

export class UploadAdapter {
private loader;
constructor(loader: any) {
this.loader = loader;
}

public upload(): Promise<any> {
return this.readThis(this.loader.file);
}

readThis(file: any): Promise<any> {
console.log(file)
let imagePromise: Promise<any> = new Promise((resolve, reject) => {
var myReader: FileReader = new FileReader();
myReader.onloadend = (e) => {
console.log("girdi");
let image = myReader.result;
console.log(image);
resolve({ default: "data:image/png;base64," + image });
}
myReader.readAsDataURL(file);
});
return imagePromise;
}

}

组件内

onReady(eventData) {
eventData.plugins.get('FileRepository').createUploadAdapter = function (loader) {
console.log(btoa(loader.file));
return new UploadAdapter(loader);
};
}

在html 中

<ckeditor [editor]="Editor"(ready)="onReady($event)" data="<p>Hello, world!</p>"></ckeditor>

我在以下出错

类型错误：无法在"FileReader"上执行"readAsDataURL"：参数1不是"Blob"类型

我的失踪在哪里？

提前感谢

感谢@Chellappanவ感谢他的建议。它解决了错误。但图像在一秒钟后就消失了

Answer 1

file : Promise.<(File | null)>

正如文档中提到的，文件返回类型是Promise，因此我们在将文件分配给readAsDataURL之前已经解决了这个问题。

试试这个：

public async upload(): Promise<any> {
const file = await this.loader.file;
return this.readThis(file);
}