当展示列表使用 URL.createObjectURL 的创建临时图片、视频无法加载问题

问题总结：因缓存机制问题，及更新同异步造成视频未及时更新

1.图片使用

复制代码

<a-image

                

                :width="40"

                :height="40"

                :src="

requestUrl(record.imagePreSignedUrl) "

              />

2.创建响应式方法

复制代码

//图片缓存管理
const imageCache = ref(new Map<string, string>());
// 新增：获取图片URL的响应式方法
const getImageUrl = (url: string): string => {
  if (!url || !isProductionHaishi.value) {
    return url || "";
  }

  // 检查缓存
  if (imageCache.value.has(url)) {
    return imageCache.value.get(url)!;
  }

  // 异步加载图片
  loadImageToBase64(url);
  return "";
};

3.通过请求转换图片

复制代码

// 新增：异步加载图片并转换为base64
const loadImageToBase64 = async (url: string) => {
  if (!url || imageCache.value.has(url)) {
    return;
  }

  try {
    const token = Util.getAuthorization();//自己获取本地token方法
    const response = await axios({
      method: "GET",
      url: url,
      responseType: "blob",
      headers: {
        Authorization: `Bearer ${token}`,
      },
    });

    const blob = response.data;
    const base64Data = await blobToDataURL(blob);

    // 更新缓存
    imageCache.value.set(url, base64Data);

    // 触发视图更新
    imageCache.value = new Map(imageCache.value);
  } catch (error) {
    console.error("图片加载失败:", error);
    // 可以设置一个错误占位图
    imageCache.value.set(url, "");
    imageCache.value = new Map(imageCache.value);
  }
};

4.图片就可以正常加载了；

-----------------------------------------------------分割线----------------------------------------------------------

问题：视频播放问题

1.引用

复制代码

 <video
           
            ref="videoPlayerRef"
            width="1150"
            height="auto"
            controls
          >
            <source
              :src=" getVideoUrl(previewVideo) "
              type="video/mp4"
            />
          </video>

2.新增：获取视频URL的响应式方法

复制代码

// 新增：视频缓存管理
const videoCache = ref(new Map<string, string>());
const getVideoUrl = (url: string): string => {
  if (!url || !isProductionHaishi.value) {
    return url || "";
  }

  // 检查缓存
  if (videoCache.value.has(url)) {
    return videoCache.value.get(url)!;
  }

  // 异步加载视频
  loadVideoToBase64(url);
  return "";
};

3.新增：异步加载视频并转换为base64

复制代码

const loadVideoToBase64 = async (url: string) => {
  if (!url || videoCache.value.has(url)) {
    return;
  }

  try {
    const token = Util.getAuthorization();//根据自己获取token方法修改
    const response = await axios({
      method: "GET",
      url: url,
      responseType: "blob",
      headers: {
        Authorization: `Bearer ${token}`,
      },
    });

    const blob = response.data;
    const base64Data = await blobToDataURL(blob);

    // 更新缓存
    videoCache.value.set(url, base64Data);

    // 触发视图更新
    videoCache.value = new Map(videoCache.value);
  } catch (error) {
    console.error("视频加载失败:", error);
    // 可以设置一个错误占位视频或空字符串
    videoCache.value.set(url, "");
    videoCache.value = new Map(videoCache.value);
  }
};

4.视频就可以播放了加载了