如何在 Vue 中动态设置视频上传后的时间输入框最大值-html教程-PHP中文网

如何在 Vue 中动态设置视频上传后的时间输入框最大值

本文介绍在 Vue 应用中，如何根据用户上传的视频文件自动计算并更新的 max 属性值，避免直接操作 DOM，采用响应式数据绑定与模板引用实现优雅、可靠的时长同步。

本文介绍在 vue 应用中，如何根据用户上传的视频文件自动计算并更新 `` 的 `max` 属性值，避免直接操作 dom，采用响应式数据绑定与模板引用实现优雅、可靠的时长同步。

在 Vue 开发中，动态更新 <input type="time"> 的 max 值看似简单，但若沿用原生 DOM 操作（如 document.getElementById().setAttribute()）或错误使用 v-model 绑定文件输入，极易导致响应失效、时间格式不合法或生命周期错乱等问题。正确做法是完全交由 Vue 的响应式系统管理状态与视图。

✅ 推荐实现方案（Vue 2/3 兼容）

核心思路：

vue-composition-api-best-practices

Vue 3 组合式 API 与最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。

下载

使用 ref 获取文件输入和视频元素（非 document.querySelector）；
将视频 URL 存入响应式数据（如 this.videogallery.video），通过 v-if 控制 <video></video> 元素渲染；
利用 <video></video> 的 @loadedmetadata 事件获取真实时长，并转换为标准 HH:MM:SS 格式；
通过 :max="maxTime" 动态绑定时间输入框的最大值。

完整示例代码：

<template><ccardbody><crow><ccol><crow form class="form-group"><ccol sm="3">视频文件（MP4/FLV）</ccol><ccol sm="3"><input id="duration-video" ref="videoInput" type="file" accept="video/*" horizontal></ccol></crow></ccol></crow><crow class="mt-3"><input id="end" type="time" name="end" placeholder="请输入结束时间" min="05:00" :max="maxTime" required></crow><!-- 隐藏但必要的 video 元素，用于读取元数据 --><video v-if="videogallery.video" ref="videoEl" :src="videogallery.video" style="display: none;"></video></ccardbody></template><script>
export default {
  data() {
    return {
      videogallery: {
        video: ''
      },
      maxTime: '10:00' // 初始默认值，可按需调整
    }
  },
  methods: {
    setFileInfo(event) {
      const file = event.target.files[0]
      if (!file) return
      const url = URL.createObjectURL(file)
      this.videogallery.video = url
      // 清除之前可能残留的旧对象 URL（防内存泄漏）
      this.$once('hook:destroyed', () => URL.revokeObjectURL(url))
    },

    setDuration(e) {
      const duration = e.target.duration
      this.maxTime = this.secToHHMMSS(duration)
    },

    // 将秒数转为标准 time 输入支持的 HH:MM:SS 格式（自动补零）
    secToHHMMSS(totalSeconds) {
      const hours = Math.floor(totalSeconds / 3600)
      const minutes = Math.floor((totalSeconds % 3600) / 60)
      const seconds = Math.floor(totalSeconds % 60)

      const pad = (n) => (n < 10 ? '0' + n : '' + n)
      return `${pad(hours)}:${pad(minutes)}:${pad(seconds)}`
    }
  },

  beforeUnmount() {
    // Vue 2 中使用 beforeDestroy，Vue 3 中使用 beforeUnmount
    if (this.videogallery.video) {
      URL.revokeObjectURL(this.videogallery.video)
    }
  }
}
</script>

⚠️ 关键注意事项

禁止对 <input type="file"> 使用 v-model：它不支持双向绑定，且 :v-model= 是语法错误，应仅用 @input 或 @change 处理。
<video></video> 必须渲染才能触发 loadedmetadata：因此需配合 v-if 和响应式 src，而非 document.createElement 动态插入。
时间格式必须严格符合 HH:MM:SS：<input type="time"> 不接受 H:M:S 或小数秒；务必补零（如 01:05:07 而非 1:5:7）。
及时释放 Object URL：调用 URL.revokeObjectURL() 防止内存泄漏，推荐在组件卸载前或文件变更后清理。
兼容性提示：<input type="time"> 在 Safari 旧版本中支持有限，生产环境建议增加降级逻辑（如 fallback 为文本输入 + 正则校验）。