如何更新对象中图片并返回整个对象的Observable？

先修正你代码中的关键问题，最终实现如下：

import { of, from } from 'rxjs';
import { concatMap, map, toArray } from 'rxjs/operators';

// 假设uploadImage是返回Observable<string>的上传函数
const updateObjWithUploadedImages = (obj: SomeType) => {
  return of(obj).pipe(
    map(obj => obj.imageOrder),
    switchMap(imageOrder => from(imageOrder)),
    concatMap(order => {
      // 从原对象的images中取出对应图片链接
      const imageLink = obj.images[order];
      // 上传完成后，将order与新链接配对返回
      return uploadImage(imageLink).pipe(
        map(newImageLink => ({ order, newImageLink }))
      );
    }),
    toArray(),
    map(uploadResults => {
      // 复制原images对象，避免修改原始数据
      const updatedImages = { ...obj.images };
      // 遍历上传结果，替换对应位置的图片链接
      uploadResults.forEach(({ order, newImageLink }) => {
        updatedImages[order] = newImageLink;
      });
      // 返回全新的对象，保持数据不可变性
      return {
        ...obj,
        images: updatedImages
      };
    })
  );
};

// 使用示例
const updatedObj$ = updateObjWithUploadedImages(obj);

关键修改说明 #

• concatMap逻辑修正：原代码直接返回数组[order, uploadImage(image)]会导致流中混入字符串和Observable，正确做法是通过map把上传结果和对应order包装成统一格式的对象，确保流数据结构一致。
• 数据不可变性处理：通过扩展运算符...复制原对象及images属性，避免直接修改输入对象，符合前端状态管理的最佳实践。
• 数据源修正：原代码中的imageUrls应为obj.images，因为图片链接原本就存储在输入对象的images属性中。

最终效果 #

订阅updatedObj$后，会得到更新后的完整对象：

{
  images: {imageOrder1: updatedImageLink, imageOrder2: updatedImageLink},
  imageOrder: [imageOrder1, imageOrder2]
}

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