項(xiàng)目中需要提供一個(gè)視頻介紹，使用Vue+Element UI中的el-upload組件實(shí)現(xiàn)視頻上傳及進(jìn)度條展示，后臺(tái)提供視頻上傳API并返回URL，?百度找了一番后最終實(shí)現(xiàn)了。

HTML

<el-upload
     class="avatar-uploader"
     action=""    //上傳地址
     v-bind:data="{ FoldPath: '上傳目錄', SecretKey: '安全驗(yàn)證' }" //可刪除
     v-bind:on-progress="uploadVideoProcess"
     v-bind:on-success="handleVideoSuccess"
     v-bind:before-upload="beforeUploadVideo"
     v-bind:show-file-list="false"
     :headers="headers"   //頭部攜帶的token 非必須
     >
     <video
     v-if="videoForm.showVideoPath != '' && !videoFlag"
     v-bind:src="videoForm.showVideoPath"   //上傳后回顯的地方
     class="avatar video-avatar"
     controls="controls">
     您的瀏覽器不支持視頻播放
      </video>
     <i v-else-if="videoForm.showVideoPath == '' && !videoFlag" //i標(biāo)簽是上傳前的那個(gè)+上傳后隱藏
     class="el-icon-plus avatar-uploader-icon"
     ></i>
     <el-progress v-if="videoFlag == true" type="circle"
     v-bind:percentage="videoUploadPercent"
     style="margin-top: 7px"></el-progress>
 </el-upload>

JS

 //上傳前回調(diào)
    beforeUploadVideo(file) {
      var fileSize = file.size / 1024 / 1024 < 50;   //控制大小  修改50的值即可
      if (
        [
          "video/mp4",
          "video/ogg",
          "video/flv",
          "video/avi",
          "video/wmv",
          "video/rmvb",
          "video/mov",
        ].indexOf(file.type) == -1     //控制格式
      ) {
        layer.msg("請(qǐng)上傳正確的視頻格式");
        return false;
      }
      if (!fileSize) {
        layer.msg("視頻大小不能超過(guò)50MB");
        return false;
      }
      this.isShowUploadVideo = false;
    },
    //進(jìn)度條
    uploadVideoProcess(event, file, fileList) {    //注意在data中添加對(duì)應(yīng)的變量名
      this.videoFlag = true;  
      this.videoUploadPercent = file.percentage.toFixed(0) * 1;
    },
    //上傳成功回調(diào)
    handleVideoSuccess(res, file) {
      this.isShowUploadVideo = true;
      this.videoFlag = false;
      this.videoUploadPercent = 0;
 
      console.log(res);
      //后臺(tái)上傳數(shù)據(jù)
      if (res.success == true) {  
        this.videoForm.showVideoPath = res.data.url;    //上傳成功后端返回視頻地址 回顯
      } else {
        this.$message.error("上傳失敗！");
      }
    },

data

      videoFlag: false,
      //是否顯示進(jìn)度條
      videoUploadPercent: "",
      //進(jìn)度條的進(jìn)度，
      isShowUploadVideo: false,
      //顯示上傳按鈕
      videoForm: {
        showVideoPath: "",  //回顯的變量
      },

css

.avatar-uploader-icon {
  border: 1px dashed #d9d9d9 !important;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9 !important;
  border-radius: 6px !important;
  position: relative !important;
  overflow: hidden !important;
}
.avatar-uploader .el-upload:hover {
  border: 1px dashed #d9d9d9 !important;
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 300px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 300px;
  height: 178px;
  display: block;
}

成功后的截圖

?文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-740715.html

到了這里，關(guān)于element UI el-upload組件實(shí)現(xiàn)視頻文件上傳視頻回顯的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！