VUE+element 上传视频

VUE+element上传视频

效果展示

html部分

 <el-form-item label="视频上传" prop="storageurl">
          <!-- action必选参数, 上传的地址 -->
          <el-upload
            class="avatar-uploader el-upload--text"
            action="上传视频的后台地址"
            :show-file-list="false"
            :on-success="handleVideoSuccess"
            :before-upload="beforeUploadVideo"
            :on-progress="uploadVideoProcess"
          >
            <video
              v-if="videoForm.storageurl != '' && videoFlag == false"
              :src="videoForm.storageurl"
              class="avatar"
              controls="controls"
            >
              您的浏览器不支持视频播放
            </video>
            <i
              v-else-if="videoForm.storageurl == '' && 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>

js部分

data() {
    
    
return{
    
    
videoForm: {
    
    
storageurl: // 视频地址
}
},
  // 验证视频格式
    beforeUploadVideo(file) {
    
    
      if (
        [
          'video/mp4',
          'video/ogg',
          'video/flv',
          'video/avi',
          'video/wmv',
          'video/rmvb'
        ].indexOf(file.type) === -1
      ) {
    
    
        this.$message.error('请上传正确的视频格式')
        return false
      }
    },
    // 上传进度显示
    uploadVideoProcess(event, file, fileList) {
    
    
      console.log(event.percent, file, fileList)
      this.videoFlag = true
      this.videoUploadPercent = Math.floor(event.percent)
    },

    // 获取上传图片地址
    handleVideoSuccess(res, file) {
    
    
      this.videoFlag = false
      this.videoUploadPercent = 0
      if (res.status === 200) {
    
    
        console.log(res.data)
        this.videoForm.storageurl = res.data
      } else {
    
    
        this.$message.error('视频上传失败，请重新上传！')
      }
    },

style部分

.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;
}