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;
	  //调用后端上传视频的接口
	  api.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;
	},
}

封装上传文件方法

import api from "./api"

const uploadMp4 = (file, formData) => {
  return new Promise((resolve, reject) => {
    if (formData == null) {
      formData = new FormData();
      formData.append("file", file)
    }
    api.upload(formData, {
        token: "none"
      })
      .then(res => {
        if (res.code == 0 && res.data) {
          return resolve(res.data.picUrl)
        } else {
          return reject(res.message)
        }
      })
      .catch(err => {
        return reject(err.message || '上传文件太大或者格式错误，请重新上传')
      })
  })
}
export default uploadMp4

api.js

//自定义http请求
import http from './http.js';
import QS from 'qs';
const get = http.get;
const post = http.post; 

let api = {
  upload: p => post('api/manage/img/upload', p), //文件上传
};
export default api;

http.js

import Axios from "axios";
const isDev = process.env.NODE_ENV === "development";
const get = (url, params) => {
  url = (isDev ? "/api/" : "/xqlive/") + url; // 开发环境或者生产环境 
  return new Promise((resolve, reject) => {
    Axios.get(url, params)
      .then(res => {
        resolve(res.data);
      })
      .catch(err => {
        reject(err.data);
      });
  });
};
const post = (url, params, config) => {
  url = (isDev ? "/api/" : "/xqlive/") + url; 
  return new Promise((resolve, reject) => {
    Axios.post(url, params, config)
      .then(res => {
        resolve(res.data);
      })
      .catch(err => {
        reject(err.data);
      });
  });
};


const remove = (url, params, config) => {
  url = (isDev ? "/api/" : "/xqlive/") + url;
  console.log(isDev, process.env.NODE_ENV); 
  return new Promise((resolve, reject) => {
    Axios.delete(url, params, config)
      .then(res => {
        resolve(res.data);
      })
      .catch(err => {
        reject(err.data);
      });
  });
};
const put = (url, params, config) => {
  url = (isDev ? "/api/" : "/xqlive/") + url;
  console.log(isDev, process.env.NODE_ENV); 
  return new Promise((resolve, reject) => {
    Axios.put(url, params, config)
      .then(res => {
        resolve(res.data);
      })
      .catch(err => {
        reject(err.data);
      });
  });
};
export default { get, post,remove,put };

大功告成

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