需求：基于element-UI上傳視頻

一、首先看成果圖：

后臺管理頁面，上傳之后可進(jìn)行播放

后臺管理編輯頁面

移動端頁面

移動端顯示情況

二、實(shí)現(xiàn)步驟

1、表單內(nèi)

<el-form-item   label="添加視頻" class="video-upload">

              <el-upload
                class="avatar-uploader"
                :action="uploadURL"
                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="formData.videoUrl !='' && videoFlag == false" 
                  :src="formData.videoUrl"
                  width="350"
                  height="180"
                  controls="controls"
                >您的瀏覽器不支持視頻播放</video>

                <el-progress
                id="hhh"
                  v-if="videoFlag == true"
                  type="circle"
                  :percentage="videoUploadPercent"
                  style="margin-top:30px"
                ></el-progress>
              </el-upload>
</el-form-item>

2、在方法中定義以下方法

 methods: {
    beforeUploadVideo(file) {
      //視頻上傳之前判斷他的大小
      const isLt10M = file.size / 1024 / 1024 < 20;
      if (!isLt10M) {
        this.$message.error("上傳視頻大小不能超過20MB哦!");
        return false;
      }
    },
    uploadVideoProcess(event, file, fileList) {
      //視頻上傳的時候獲取上傳進(jìn)度傳給進(jìn)度條
      this.videoFlag = true;
      this.videoUploadPercent = parseInt(file.percentage);
      console.log(this.videoUploadPercent);
    },
    handleVideoSuccess(res, file) {
      //視頻上傳成功之后返回視頻地址
      this.videoFlag = false;
      this.formData.fileName = res.data.fileName;
      this.formData.filePath = res.data.filePath;
      this.formData.videoUrl = this.url + res.data.filePath + res.data.fileName;
      this.videoUploadPercent = 0;
      console.log("視頻", res);
    },
}