【ElementUI组件】视频上传+计算视频时长

效果如下：

实现步骤：

1.首先先安装官网的操作步骤安装elementui 或者 不安装直接引入

安装指令：

npm i element-ui -S

引入方式：

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

2.以下是参考代码

HTML代码：

          <div>
            <el-upload
              class="upload-demo"
              action="/api/common/uploadFile"
              :on-remove="onRemove"
              :file-list="videoUrl"
              :on-success="onSuccess"
              :before-upload="beforeUpload" 
              limit="1">
              <el-button
                size="small"
                type="primary">
                点击上传
              </el-button>
              <div slot="tip"
                   class="el-upload__tip">
                只能
                mp4文件，且不超过1GB
              </div>
            </el-upload>
          </div>

data中添加：

videoUrl: [],//视频，一定要是一个数组

js代码：

	//视频移除时
    onRemove() {
      this.videoUrl = []
      this.form.classHourTime = ''
    },
    //视频上传成功
    onSuccess(response, res, file) {
      let arr = [
        {
          name: '',
          url: '',
        },
      ]
      if (response.code == 200) {
        arr[0].name = file[0].name
        arr[0].url = response.data.url
        this.$message({
          message: '上传成功',
          type: 'success',
        })
        var audio = new Audio(arr[0].url)
        audio.addEventListener('loadedmetadata', () => {
          this.form.classHourTime = audio.duration
        })
      }
      this.videoUrl = arr
    },
    //视频上传成功
    onSuccess(response, res, file) {
      let arr = [
        {
          name: '',
          url: '',
        },
      ]
      //如果往 action 地址上传视频成功则会有一个返回值（后端配置）
      if (response.code == 200) {
        arr[0].name = file[0].name
        arr[0].url = response.data.url
        this.$message({
          message: '上传成功',
          type: 'success',
        })
        // 通过URL获取视频时长
        var audio = new Audio(arr[0].url)
        audio.addEventListener('loadedmetadata', () => {
        	//返回的是 秒 格式的时间
          this.form.classHourTime = audio.duration
        })
      }
      this.form.classHourTime = this.getTime(this.form.classHourTime)
      this.videoUrl = arr
    },
    //时间转换 秒转时分秒
    getTime(time) {
      let h = parseInt((time / 60 / 60) % 24)
      h = h < 10 ? '0' + h : h
      let m = parseInt((time / 60) % 60)
      m = m < 10 ? '0' + m : m
      let s = parseInt(time % 60)
      s = s < 10 ? '0' + s : s
      let ms = `${m}:${s}`
      // 作为返回值返回
      return ms
    },

计算视频时长如下：

上传视频成功后，接口会返回一个地址，用这个地址就可以获取视频时长

		// 通过URL获取视频时长
        var audio = new Audio(arr[0].url)
        audio.addEventListener('loadedmetadata', () => {
        	//返回的是 秒 格式的时间
          this.form.classHourTime = audio.duration
        })

上传视频成功：

如果需要其格式的时间，请参考上篇博客
【JS】常用的4种时间格式转换