vue 上传视频 获取视频时长 带上传进度条 实例详解

如同所示，实现上传视频的功能：

html部分

//element-ui提供的上传组件el-upload
<el-upload
  class="avatar-uploader el-upload--text"
  action="#"
  :show-file-list="false"
  :before-upload="beforeUploadVideo"
>
  <video
    v-if="form.tryVideo !='' && videoFlag == false"
    style="width:300px; height:auto;"
    :src="form.tryVideo"
    class="avatar"
    controls="controls"
  >您的浏览器不支持视频播放</video>
  <div class="add-video" v-else-if="form.tryVideo =='' && videoFlag == false">
    <i class="el-icon-plus avatar-uploader-icon"></i>
  </div>
  <el-progress
    v-if="videoFlag == true"
    type="circle"
    :percentage="videoUploadPercent"
    style="margin-top:30px;"
  ></el-progress>
</el-upload>

js部分

data() {
	return {
		form: { 
		tryVideo: "",
		tryVideoImg: "", 
		},
		videoFlag: false, //是否显示进度条
		videoUploadPercent: 0, //进度条的进度，
		duration: "", //视频时长
	}
}

//方法
methods: {
	//上传视频格式限制
	beforeUploadVideo(file) {
	  if (
	    [
	      "video/mp4",
	      "video/ogg",
	      "video/flv",
	      "video/avi",
	      "video/wmv",
	      "video/rmvb"
	    ].indexOf(file.type) == -1
	  ) {
	    this.$message.error("请上传正确的视频格式");
	    return false;
	  }
	  //获取视频时长
	  let videoUrl = URL.createObjectURL(file);
	  let audioElement = new Audio(videoUrl);
	  audioElement.addEventListener("loadedmetadata", () => {
	    let duration = audioElement.duration; //时长为秒，小数，182.36
	    if (duration > 16) {
	      this.$message.error("提示，上传视频时长不能超过15秒");
	      return false;
	    }
	    this.addVideo(file);
	  });
	  return false;
	},
	//上传视频接口
	addVideo(file) {
	  //设置formData
	  let formData = new FormData();
	  formData.append("file", file);
	  //在请求头设置上传进度条
	  let config = {
	    onUploadProgress: progressEvent => {
	      var complete =
	        ((progressEvent.loaded / progressEvent.total) * 100) | 0;
	      this.videoUploadPercent = complete;
	    },
	    headers: {
	      "Content-Type": "multipart/form-data"
	    }
	  };
	  this.videoFlag = true;
	  //调用后端上传视频的接口
	  dodoApi.uploadMp4(formData, config).then(res => {
	    this.videoFlag = false;
	    if (res && res.code == 0) {
	      this.form.tryVideo = res.data.picUrl;//视频地址
	      this.form.tryVideoImg = res.data.smallPicUrl;//视频封面
	    } else {
	      this.$message.error(res.message || "网络出了小差");
	    }
	  });
	  return false;
	},
}

大功告成

最后，给大家看看我上传视频的传参格式