CKEditor 5 使用自定义上传适配器上传图片

问题描述

我正在使用 Angular 11 和 Spring-Boot 后端实现 CKEditor 5。 我按照 https://ckeditor.com/docs/ckeditor5/latest/framework/guides/deep-dive/upload-adapter.html 实现了自定义图像上传适配器。

在后端，我使用令牌实现了安全性。

正在上传。但是，图片加载不起作用，出现 HTTP 401 错误。

如何自定义自定义适配器以使用令牌加载图像？

代码如下：

export class CustomUploadAdapter {
    public loader: any;
    public url: string;
    public xhr: XMLHttpRequest;
    public token: string;

    constructor(
        loader    
    ) {
        this.loader = loader;
    }

    upload() {

        return new Promise(async (resolve,reject) => {
            this.loader.file.then((file) => {
                this._initRequest();
                this._initListeners(resolve,reject,file);
                this._sendRequest(file);
            });
        });
    }

    abort() {
        if (this.xhr) {
            this.xhr.abort();
        }
    }

    _initRequest() {
        const xhr = (this.xhr = new XMLHttpRequest());
        xhr.open("POST",this.url,true);
        this.token = localStorage.getItem("access_token");
        this.token = localStorage.getItem("access_token");
        
        xhr.setRequestHeader("Authorization",'Bearer ' + this.token);

        xhr.responseType = "json";
    }

    _initListeners(resolve,file) {
        const xhr = this.xhr;
        const loader = this.loader;
        const genericErrorText = "Couldn't upload file:" + ` ${file.name}.`;

        xhr.addEventListener("error",() => reject(genericErrorText));
        xhr.addEventListener("abort",() => reject());

        xhr.addEventListener("load",() => {
            const response = xhr.response;

            if (!response || response.error) {
                return reject(
                    response && response.error ? response.error.message : genericErrorText
                );
            }

            resolve(
                response.urls
            );
        });

        if (xhr.upload) {
            xhr.upload.addEventListener("progress",(evt) => {
                if (evt.lengthComputable) {
                    loader.uploadTotal = evt.total;
                    loader.uploaded = evt.loaded;
                }
            });
        }
    }

    _sendRequest(file) {
        const data = new FormData();

        data.append("file",file);

        this.xhr.send(data);
    }
}

export class Component implements OnInit {

  @ViewChild('ckeditor',{ static: false })
  ckeditor: any;

  public configCkeditor = ckeditor5Util.configCkeditor; //configs...
   ...
   public onReady(editor) {
    editor.plugins.get("FileRepository").createUploadAdapter = (loader) => {
      return new CustomUploadAdapter(loader);
    };
    ...
   }
   ...
}

html {
...
<ckeditor [editor]="editor" (ready)="onReady($event)" formControlName="texto" debounce="500"
      [config]="configCkeditor"></ckeditor>
...
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）