在 Froala 中上传并显示受保护的图像

Question

我在 Angular 中使用 Froala 并尝试插入受承载令牌保护的图像。

我能够成功上传图片并返回图片URL。

另外，仅出于测试目的，如果我获取图像，它似乎已正确加载。您可以在“image.uploaded”事件中看到 fetch 方法。

但是，上传后，我收到错误：{code: 1, message: '图片无法从传递的链接加载。'}

那么，问题来了，如何在Froala编辑器中插入受授权保护的图片呢？

代码：

    <div [froalaEditor]="froalaEditorOptions" [(froalaModel)]="text">
    </div>

public froalaEditorOptions(token: string): object {
    const options: object = {
      key: environment.keys.froalaKey,

      imageUploadURL: 'http://localhost:5010/upload-image',
      imageUploadMethod: 'POST',
      imageMaxSize: 5 * 1024 * 1024,
      imageAllowedTypes: ['jpeg', 'jpg', 'png'],

      ...

      requestHeaders: {
        Authorization: 'Bearer ' + token
      },

      events: {
        'image.uploaded': function (e, editor, response) {
            console.log('image.uploaded');
            editor = this;
            const imageObject = JSON.parse(e);
  
            const headers = new Headers();
            headers.set('Authorization', `Bearer ${token}`);
  
            fetch(imageObject.link, { headers }).then(image => {
              editor.image.insert(image, null, null, null, e);
            });

          ...
        }
    }

    return options;
}

Answer 1

不幸的是这是不可能的。原因是浏览器在您上传图像后发出图像请求，并且无法拦截该请求并填充您的不记名令牌。

如果您将图像存储在云中（例如 Azure 存储容器），则可以在此处使用 SAS Uri 方法临时将公共 URL 返回到编辑器，以便图像正确显示。但是，每次将 HTML 加载到编辑器时，您都必须自己“重写”这些 SAS Uris。