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. 加载成功后,或者到达一定次数时,注意及时销毁
相关推荐
FogLetter10 分钟前
从原生JS事件到React事件机制:深入理解前端事件处理
前端·javascript·react.js
小公主22 分钟前
如何利用闭包封装私有变量?掌握防抖、节流与 this 问题的巧妙解决方案
前端
烛阴26 分钟前
JavaScript 的动态魔法:使用 constructor 动态创建函数
前端·javascript
前端 贾公子37 分钟前
tailwind ( uni ) === 自定义主题
前端
独立开阀者_FwtCoder44 分钟前
大制作!在线 CSS 动效 编辑神器!太炫酷了!
前端·javascript·github
白白李媛媛1 小时前
vue3中实现echarts打印功能
前端·vue.js·echarts
尘心cx1 小时前
前端-HTML-day2
前端·html
歘chua1 小时前
组件封装:封装一个可复用的crud界面的思路
前端
徐小夕1 小时前
牛!用vue3实现的多维表格编辑器,小白也能轻松构建复杂数据报表!
前端·javascript·vue.js
爱编程的喵1 小时前
CSS动画实战:从零打造一个超萌的小球亲亲动画
前端·css