如何在Angular 6中转换blob:图片格式及处理富文本编辑器图片路径？

刚好之前在Angular项目里处理过一模一样的场景，给你详细拆解解决方案：

一、核心：将Blob转换为Base64格式 #

Blob URL（blob:开头的地址）是浏览器生成的临时本地地址，刷新页面后就会失效，所以我们需要把它转成Base64格式的Data URL，这样就能持久化显示或者存储。

在Angular 6中，你可以用FileReader API来实现转换，封装一个通用方法：

// 封装Blob转Base64的工具函数
blobToBase64(blob: Blob): Promise<string> {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onloadend = () => resolve(reader.result as string);
    reader.onerror = reject;
    reader.readAsDataURL(blob);
  });
}

这个方法返回一个Promise，调用后就能拿到Base64格式的图片地址（格式类似data:image/png;base64,iVBORw0KGgo...）。

二、结合富文本编辑器的具体处理流程 #

你提到用Rich Text Editor上传图片后源码里是Blob URL，需要替换成可正常显示的地址，步骤如下：

1. 拦截编辑器的图片上传事件
   不同的富文本编辑器（比如CKEditor、TinyMCE、Quill）都有上传回调钩子，找到对应的上传成功回调函数，在这里处理图片的转换逻辑。

2. 转换Blob为Base64并替换编辑器内容
   假设你已经拿到了图片的Blob对象和对应的Blob URL，调用上面的工具函数，然后把编辑器里的Blob URL替换成Base64地址：

// 示例：编辑器上传回调中的处理逻辑
async handleImageUpload(blob: Blob, blobUrl: string) {
  try {
    const base64Url = await this.blobToBase64(blob);
    // 获取编辑器当前的HTML内容
    let editorContent = this.editorInstance.getContent();
    // 替换Blob URL为Base64地址
    editorContent = editorContent.replace(blobUrl, base64Url);
    // 更新编辑器内容
    this.editorInstance.setContent(editorContent);
  } catch (error) {
    console.error('转换Blob为Base64失败:', error);
  }
}

如果你的编辑器只能拿到Blob URL而不是Blob对象，也可以先通过fetch获取Blob，再转换：

async convertBlobUrlToBase64(blobUrl: string): Promise<string> {
  const response = await fetch(blobUrl);
  const blob = await response.blob();
  return this.blobToBase64(blob);
}

三、注意事项 #

• 性能考量：Base64格式的图片体积会比原Blob大30%左右，如果是大图片，建议考虑上传到后端存储，返回HTTP URL，而不是转Base64。
• Angular安全策略：如果直接绑定Base64地址到<img>标签，Angular的DomSanitizer可能会拦截，需要用bypassSecurityTrustResourceUrl处理：

  import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
  
  constructor(private sanitizer: DomSanitizer) {}
  
  getSafeBase64Url(base64Url: string): SafeResourceUrl {
    return this.sanitizer.bypassSecurityTrustResourceUrl(base64Url);
  }
  

  在模板中使用：<img [src]="getSafeBase64Url(base64Url)">

内容的提问来源于stack exchange，提问作者Mishty