<el-form-item label="新增視訊" class="video-upload">
                  <el-upload
                    class="avatar-uploader"
                    action="介面地址"
                    accept='.mp4,.qlv,.qsv,.ogg,.flv,.avi,.wmv,.rmvb'  //格式型別
                    :data="paramsdata"                                 //其他引數
                    :show-file-list="false"
                    :before-upload="beforeUploadVideo"                 //用來判斷大小
                    :on-success="handleVideoSuccess"                   
                    :on-progress="uploadVideoProcess">                 //用來顯示進度條
                    <video
                      v-if="Video !='' && videoFlag == false"
                      :src="Video"
                      width="350"
                      height="180"
                      controls="controls"
                    >您的瀏覽器不支援視訊播放</video>    //視訊上傳成功之後顯示
                    <i
                      v-else-if="Video =='' && videoFlag == false"
                      class="el-icon-plus avatar-uploader-icon"
                    ></i>            //沒選擇視訊之前顯示
                    <el-progress
                      v-if="videoFlag == true"
                      type="circle"
                      :percentage="videoUploadPercent"
                      style="margin-top:30px"
                    ></el-progress>    //如果視訊正在上傳的時候顯示
                  </el-upload>
                </el-form-item>
 

data(){
    return {
        videoFlag:false,      //剛開始的時候顯示為flase
        videoUploadPercent: '0%',  //進度條剛開始的時候為0%
        paramsdata:{
            '引數': '引數值'    //新增其他引數
        }
    }
}

    beforeUploadVideo(file) {          //視訊上傳之前判斷他的大小
      const isLt10M = file.size / 1024 / 1024  < 2000;
      if (!isLt10M) {
        this.$message.error('上傳視訊大小不能超過2000MB哦!');
        return false;
      }
    },
    uploadVideoProcess(event, file, fileList){    //視訊上傳的時候獲取上傳進度傳給進度條
      this.videoFlag = true;
      this.videoUploadPercent = parseInt(file.percentage);
      console.log(this.videoUploadPercent)
    },
    handleVideoSuccess(res, file) {           //視訊上傳成功之後返回視訊地址
      this.videoFlag = false;
      this.videoUploadPercent = 0;
      console.log(res)
      this.Video = res.data[0];
    },
 

為了這個上傳視訊琢磨了好長時間。在網上找到東西。但是可能是因為少東西。所以總是錯。現在記下來防止以後忘記。

獻上兩個地址

原文章

這個我感覺把我在用upload時遇到的問題都解決了，特別棒