记录vue+element 上传视频

• 需求:需要在上传视频前展示视频内容,上传的格式formData,也就是文件格式
• 需要跟其他的文件格式一起上传
• 本地获取视频后需要转换成网址以便在video中播放
• 可以展示后端传来的视频内容

思路
需要el-upload组件
需要在上传文件前对文件进行验证,通过before-upload事件验证是否是视频文件
再通过http-request事件获取到文件格式,保存(传给后端),
在网上找的两种方法转换url地址

提示:需要看文件的格式是否是你需要的file格式 还是需要再进一步拿到的 file
onChange(file){
	// 此方法如果是大文件时会出现偶尔卡顿
    let reader = new FileReader();
     reader.readAsDataURL(file.raw);
     reader.onload = () => {
       console.log(reader.result, "地址");
     };
     / // 第二种方法
    let URL = window.URL || window.webkitURL;
     let url = URL.createObjectURL(file.raw);
     console.log(url );
}

下面上完整代码

  
   			
           
              
这里是提示用户上传视频的限制,如大小不能超过20m
              //这里你自己切换隐藏一下
              
            
	


    beforeUploadVideo(file) {
      console.log(file);
      const isLt25M = file.size / 1024 / 1024 < 25;
      if (
        [
          "video/mp4",
          "video/ogg",
          "video/flv",
          "video/avi",
          "video/wmv",
          "video/rmvb",
        ].indexOf(file.type) === -1
      ) {
        this.$message.error("请上传正确的视频格式");
        return false;
      }
      if (!isLt25M) {
        this.$message.error("上传普通视频大小不能超过25M!");
        return false;
      }
    },

    // 上传视频文件
    handleVideoSuccess(file) {
      console.log(file);
      let URL = window.URL || window.webkitURL;
      this.form.videoUrl = URL.createObjectURL(file.file); //地址
      this.form.videoFile = file.file; //文件file
    },