Question

我正在使用ckEditor在Angular应用中进行内容编辑。为了将图像上传到ClouFirestore，我编写了上传适配器（参考链接：StackOverflowAlanObject，如下所示，

import { Injectable, EventEmitter } from '@angular/core';
import {AngularFirestore, Reference} from  "angularfire2/firestore";
import { AngularFireUploadTask, AngularFireStorage } from 'angularfire2/storage';
import { Observable, pipe } from 'rxjs';


@Injectable()

export class CkUploadAdapter {


    task: AngularFireUploadTask;

    public percentage: Observable<number>;
    public snapshot: Observable<any>;
    getURL = new EventEmitter<string>();
    isHovering: boolean;

    loader;  // your adapter communicates to CKEditor through this
    url;

    constructor(loader, url, private storage?: AngularFireStorage, private db?: AngularFirestore) {
      this.loader = loader;   
      this.url = url;
      console.log('Upload Adapter Constructor', this.loader, this.url);
    }

upload() {

      this.loader.file.then( file => {
        this.path = this.url+`/${new Date().getTime()}_${file.name}`;
        return new Promise( ( resolve, reject ) => {
        this.storage.upload(this.path, file.name, {customMetadata: this.customMetadata});
      });
      }  
abort() {
      console.log('UploadAdapter abort');
    }
  }

在this.storage.upload（path，this.loader.file，{customMetadata：customMetadata}）行的upload（）方法中，浏览器警告“无法读取未定义的属性上载”。该错误是由zone.js生成的。控制台上的AngularFireStorage也显示未定义。

内部组件类中，我正在使用以下代码来设置ckEditor的上传适配器。

ckUploadAdapterPlugin(ckEditor) {
    ckEditor.plugins.get('FileRepository').createUploadAdapter = (loader) => {
      return new CkUploadAdapter(loader, '/test',  ckEditor.t);
    };
  }

任何想法都出了什么问题？还是我的方法不正确？感谢您的建议！

如何使用AngularFireStorage和AngularFireUploadTask上传添加到ckEditor的图像？

0 个答案: