vue3 图片/视频 加载失败重试

vue3 图片/视频 加载失败重试

需求背景

用户手机上传图片走oss ,在pc端在线客服连接socket 需要实时推送消息,接受到消息后,由于oss还回没有回调成功,所以图片/视频不能及时展示,所以做了一个失败重试的功能

效果图

技术方案

  1. 服务端接收到oss的回调,再给客户端发送一条消息,告诉回调成功了,但是前端存在一定滞后性
  2. 前端通过媒体组件提供的error事件,做回调监听,当前你可以一直监听,也可以做loadNumber次数限制

代码实现

js 复制代码
<!-- 媒体组件 可以用于聊天气泡/工单媒体数据展示 -->

<template>
  <div v-if="!pathIsMp4(props.msg)" :style="{ width: props.width + 'px', height: props.height + 'px' }">
    <el-image
      v-if="isLoaded"
      :src="imgUrl.src"
      fit="cover"
      :preview-src-list="[imgUrl.src]"
      :zoom-rate="1.2"
      :max-scale="7"
      :min-scale="0.5"
      lazy
    >
      <template #error>
        <div>{{ $t('common_loading_error') }}</div>
      </template>
    </el-image>
    <div v-else >{{ $t('common_loading') }}...</div>
  </div>
  <div v-else :style="{ width: props.width + 'px', height: props.height + 'px' }">
    <video ref="videoRefs" controls :src="imgUrl.src" @error="handleError">
      Your browser does not support the video tag.
    </video>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted, onBeforeUnmount } from 'vue'
import { pathIsMp4 } from 'mt-core-lib'

const props = defineProps({
  msg: {
    type: String,
    required: true,
    default: ''
  },
  width: {
    type: String,
    default: '138'
  },
  height: {
    type: String,
    default: '184'
  }
})
const imgUrl = reactive({ src: props.msg })
const conversionImg = new Image()
const isLoaded = ref(false) // 加载状态标志
const loadNumber = ref(5) // 加载次数
const videoRefs = ref()
let retryTimer: ReturnType<typeof setTimeout>

const checkImageLoaded = () => {
  const loadImg = () => {
    conversionImg.onload = () => {
      if (!isLoaded.value) {
        isLoaded.value = true
        imgUrl.src = conversionImg.src
        clearTimeout(retryTimer) // 清除定时器
      }
    }

    conversionImg.onerror = () => {
      console.log('图片错误')
      if (!isLoaded.value && loadNumber.value > 0) {
        loadNumber.value--
        retryTimer = setTimeout(loadImg, 2000) // 启动定时器
        console.log('图片加载失败,重新加载', retryTimer)
      } else {
        isLoaded.value = true
        clearTimeout(retryTimer) // 清除定时器
      }
    }
    conversionImg.src = props.msg
  }
  // 使用 requestIdleCallback() 方法在浏览器空闲时执行 loadImg() 函数
  if (window.requestIdleCallback) {
    window.requestIdleCallback(() => {
      loadImg()
    })
  } else {
    setTimeout(loadImg, 0)
  }
}

const handleError = (event: Event) => {
  console.log('视频加载失败', event)
  // 使用 requestIdleCallback() 方法在浏览器空闲时执行 load() 函数
  if (window.requestIdleCallback) {
    window.requestIdleCallback(() => {
      videoRefs.value.load()
    })
  } else {
    setTimeout(() => {
      videoRefs.value.load()
    }, 1000)
  }
}

onMounted(() => {
  if (!pathIsMp4(props.msg)) {
    checkImageLoaded()
  }
})

onBeforeUnmount(() => {
  clearTimeout(retryTimer) // 清除定时器
})
</script>

总结

  1. 媒体组件,提供了失败的回调,可以使用失败回调,不断的load来加载数据
  2. 加载成功后,或者到达一定次数时,注意及时销毁
相关推荐
b1gbrother16 分钟前
让你的Claude Code变得更聪明
前端·程序员
国家不保护废物25 分钟前
多模态模型数据传输的秘密武器:html5对象Blob深度解析
前端·面试·html
用户25191624271125 分钟前
Canvas之概述,画布与画笔
前端·javascript·canvas
南方kenny25 分钟前
前端小知识:搞懂 BFC块级格式化上下文,告别面试“拦路虎”!
前端·css·面试
邵洛26 分钟前
前端导出excel表格并修改导出表格样式
前端
风舞26 分钟前
JavaScript 核心概念及代码示例的梳理
前端
学长学姐我该怎么办28 分钟前
从零开始学前端html篇2
前端·html
尘世中一位迷途小书童29 分钟前
从零实现 Canvas 图形拖拽:让你的网页动起来!
前端
mrsk30 分钟前
JavaScript之变量的解构赋值全面解析(●'◡'●)
前端·javascript·面试
归于尽30 分钟前
回调函数在Node.js中是怎么执行的?
前端·javascript·node.js