Angular 文本编辑器上传图像请求未发送授权 header (JWT token )

Question

当我尝试将图像上传到我使用 jwt token 的服务器时，我在使用文本编辑器时遇到问题...它适用于所有服务，但仅当我使用文本编辑器的上传图像时，他会发送 POST 请求但没有授权 header https://ej2.syncfusion.com/angular/documentation/rich-text-editor/image/ 我已经制作了一个 JwtInterceptor 并将授权 header 设置(克隆)到请求

我尝试将 token 添加为网址中的参数，但这并不好! 我还尝试向图像设置添加标题，但也没有成功!

this.params.append('Authorization', `Bearer ${this.token}`);
    this.urlSettings = {
      type: 'post',
      url : this.url+'upload/saveFile',
      headers: this.params
    };
    this.imageSettings = {
      saveUrl: this.urlSettings,
      path: this.imageUrl
    };

import { Injectable } from '@angular/core';
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class JwtInterceptor implements HttpInterceptor {
    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        // add authorization header with jwt token if available
        const token = JSON.parse(localStorage.getItem('token'));

        if (token) {
            request = request.clone({
                setHeaders: {
                    Authorization: `Bearer ${token}`
                }
            });
        }

        return next.handle(request);
    }
}

...

<ejs-richtexteditor [insertImageSettings]='imageSettings' [toolbarSettings]='tools'  required formControlName="content_en" ></ejs-richtexteditor>

...

Answer 1

您需要使用uploading RTE 中 uploader 控件的事件，并在那里设置 header 以随图像上传发送附加 header 。要访问 uploader 控件的实例，请绑定(bind) toolbarClick事件并勾选插入图片工具，然后使用实例绑定(bind)上传事件。引用下面代码

[html]

    <ejs-richtexteditor #imageRTE id='imageRTE' [(quickToolbarSettings)]='toolbarSettings'  (toolbarClick)='onToolbarClick($event)'>

[ts]

    public onToolbarClick(e: any): void {
      if (e.item != null && e.item.id == "imageRTE_toolbar_Image") { // Checked if image toolbar is clicked 
        let element: any = document.getElementById('imageRTE_upload') // Image uploader element 
        element.ej2_instances[0].uploading = function upload(args) { // Added updating event on image uploader 
          args.currentRequest.setRequestHeader('Authorization', "Bearer ${token}"); // Setting additional headers
        }
      }
    }