Vue中上传视频后如何修改time输入框的最大值？

• 修正time输入框的max格式
  HTML的time类型输入框要求max属性必须是**HH:MM:SS格式的字符串**，每部分必须是两位数字（不足补0）。你当前拼接的hours+':'+minutes+':'+seconds会生成类似1:5:3的非标准格式，浏览器无法识别，导致设置失效。

修改时间格式化逻辑：

// 补零函数，确保数字为两位
const formatNum = num => num.toString().padStart(2, '0');
let hours = formatNum(Math.floor(duration / 3600));
let minutes = formatNum(Math.floor((duration % 3600) / 60));
let seconds = formatNum(Math.floor(duration % 60));
const maxTime = `${hours}:${minutes}:${seconds}`;

• 改用Vue响应式绑定替代直接操作DOM
  Vue项目中直接通过document.getElementById操作DOM违背响应式原则，容易出现更新不及时的问题。建议用数据绑定控制max属性：

1. 在Vue实例的data中定义变量：

data() {
  return {
    endTimeMax: '10:00:00' // 初始值对应原代码的max="10:00"，补全秒数符合格式要求
  }
}

2. 修改time输入框代码，用:max绑定变量：

<input type="time" id="end" name="end" placeholder="Enter time" min="00:05:00" :max="endTimeMax">

（注意原min="5:00"也要补全为00:05:00，符合time格式规范）

3. 在onloadedmetadata回调中更新响应式变量：

video.onloadedmetadata = function () {
  window.URL.revokeObjectURL(video.src);
  const duration = video.duration;
  self.duration = duration;
  // 格式化时间
  const formatNum = num => num.toString().padStart(2, '0');
  const hours = formatNum(Math.floor(duration / 3600));
  const minutes = formatNum(Math.floor((duration % 3600) / 60));
  const seconds = formatNum(Math.floor(duration % 60));
  self.endTimeMax = `${hours}:${minutes}:${seconds}`; // 更新变量触发DOM更新
};

• 调整事件触发逻辑
  你的文件输入框同时绑定@change和@input，可能导致setFileInfo触发时机异常。可以将setFileInfo的调用移到onVideoChange方法末尾，确保文件处理完成后再获取视频元数据：

修改file输入框的事件绑定：

<input
  type="file" ref="video" id="duration-video"
  :v-model="videogallery.video" accept="video/*"
  @change="handleVideoUpload($event, 'video')"
  horizontal
/>

新增处理方法：

handleVideoUpload(event, ref) {
  this.$helpers.onVideoChange(event, ref, this, this.videogallery, this.file, this.img);
  this.setFileInfo(); // 确保文件加载完成后执行元数据获取
}

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