ngx-quill-upload上传图片后编辑器中图片消失的问题求助

问题场景 #

使用ngx-quill构建富文本编辑器，通过ngx-quill-upload将图片上传至Firebase Storage并嵌入编辑器。当前异常表现：点击插入图片后，图片成功上传至存储但编辑器中立即消失；上传另一张图片时，之前的图片才会在编辑器中显示。

问题根源 #

1. 类级Observable变量复用冲突：uploadFile方法中使用类成员downloadURL存储下载链接Observable，每次上传会覆盖该变量。第一次上传时，return的Observable尚未被赋值（finalize在上传完成后才执行赋值），导致Promise无法及时获取值；第二次上传时，finalize触发赋值，第一个Promise才收到结果，造成图片延迟显示。
2. Observable处理逻辑时序错误：未在上传完成后直接返回下载URL的Observable，而是依赖后续赋值的变量，导致异步流程时序混乱。

解决方案 #

1. 修改Firebase上传服务方法 #

重构uploadFile，每次上传返回独立的Observable，在上传完成后直接获取并返回下载URL：

uploadFile(file: File): Observable<string> {
  const filePath = `/images/${Math.random().toString(36).substring(2)}`;
  const fileRef = this.storage.ref(filePath);
  const task = this.storage.upload(filePath, file);

  return task.snapshotChanges().pipe(
    switchMap(() => fileRef.getDownloadURL()) // 上传完成后立即获取下载URL并返回
  );
}

2. 简化ngx-quill-upload的图片处理逻辑 #

优化imageHandler的Promise流程，避免冗余嵌套：

imageHandler: {
  upload: (file: File) => {
    if (file.size >= 5000000) {
      return Promise.reject('Size too large');
    }
    return this.uploadFile(file).toPromise()
      .catch(error => {
        console.error('Error: ', error);
        return Promise.reject('Upload failed');
      });
  },
  accepts: ['png', 'jpg', 'jpeg', 'jfif']
} as Options

说明 #

• 每次上传生成独立的Observable，通过switchMap确保上传任务完成后立即获取下载URL，Promise能及时resolve，编辑器可同步显示图片。
• 移除类级的downloadURL变量，彻底避免复用导致的时序冲突。

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