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>

下面是错误

TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'.

我的失踪在哪里？

提前致谢

感谢@Chellappan வ 的建议。它解决了错误。但是图像在一秒前消失了。

Answer 1

file : Promise.<(File | null)>

如 documentation 文件中所述，return 类型是 Promise，因此我们在将文件分配给 readAsDataURL 之前已解决。

试试这个：

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

Angular CKEditor 图片上传

Angular CKEditor Image Upload

image-upload

ckeditor

angular