使用element UI el-upload组件实现视频文件上传及上传进度显示方法总结

实现效果：

上传中：

上传完成：

代码：

<el-form-item label="视频上传" prop="Video">
  <!-- action必选参数, 上传的地址 -->
    <el-upload class="avatar-uploader el-upload--text" :action="uploadUrl" :show-file-list="false" :on-success="handleVideoSuccess" :before-upload="beforeUploadVideo" :on-progress="uploadVideoProcess">
        <video v-if="videoForm.Video !='' && videoFlag == false" :src="videoForm.Video" class="avatar" controls="controls">您的浏览器不支持视频播放</video>
        <i v-else-if="videoForm.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>
    <P class="text">请保证视频格式正确，且不超过10M</P>
</el-form-item>

 

on-success：上传成功

before-upload：验证

on-progress：上传进度

验证方法：验证视频格式和视频大小

 

 
 

   
   

    
    

   
   
   
   

    
    

     
     beforeUploadVideo(file) {
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
         const isLt10M = file.size / 
     
     1024 / 
     
     1024  < 
     
     10;
    
    
   
   

   
   

    
    

   
   
   
   

    
    
    
     
     if ([
     
     'video/mp4', 
     
     'video/ogg', 
     
     'video/flv',
     
     'video/avi',
     
     'video/wmv',
     
     'video/rmvb'].indexOf(file.type) == 
     
     -1) {
    
    
   
   

   
   

    
    

   
   
   
   

    
    
        
     
     this.$message.error(
     
     '请上传正确的视频格式');
    
    
   
   

   
   

    
    

   
   
   
   

    
    
        
     
     return 
     
     false;
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
         }
    
    
   
   

   
   

    
    

   
   
   
   

    
    
    
     
     if (!isLt10M) {
    
    
   
   

   
   

    
    

   
   
   
   

    
    
        
     
     this.$message.error(
     
     '上传视频大小不能超过10MB哦!');
    
    
   
   

   
   

    
    

   
   
   
   

    
    
        
     
     return 
     
     false;
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
         }
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     },
    
    
   
   
 
 

上传进度显示：

 

 
 

   
   

    
    

   
   
   
   

    
    

     
     uploadVideoProcess(event, file, fileList){
    
    
   
   

   
   

    
    

   
   
   
   

    
    
    
     
     this.videoFlag = 
     
     true;
    
    
   
   

   
   

    
    

   
   
   
   

    
    
    
     
     this.videoUploadPercent = file.percentage.toFixed(
     
     0);
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     },
    
    
   
   
 
 

file.percentage获取文件上传进度

进度显示：

 

<el-progress v-if="videoFlag == true" type="circle" :percentage="videoUploadPercent" style="margin-top:30px;"></el-progress>
 
 

 

上传成功：

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

 

视频显示是在上传成功后后台返回视频地址，直接显示在页面中的。

demo:https://codepen.io/demoworld/pen/GbKmZg