Angular 文本编辑器上传图片请求未发送授权 header（JWT 令牌）

Question

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

我尝试将令牌作为参数添加到 url 中，但这并不好！我也尝试将 headers 添加到图像设置，但也没有运气！


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 event of the uploader control in the RTE and set the headers there to send additional headers with the image upload. To access the instance of the uploader control, bind the toolbarClick事件并勾选插入图片工具，然后使用实例绑定上传事件。参考下面的代码

[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
        }
      }
    }

Angular 文本编辑器上传图片请求未发送授权 header（JWT 令牌）

Angular text editor upload images request is not sending the Authorization header (JWT token )

text-editor

syncfusion

image-upload

jwt

angular