Vue+Element UI 实现视频上传

　　一、前言

 

　　项目中需要提供一个视频介绍，使用户能够快速、方便的了解如何使用产品以及注意事项。

 

　　前台使用Vue+ElementUI中的el-upload组件实现视频上传及进度条展示，后台提供视频上传API并返回URL。

　　二、具体实现

 

　　1、效果图展示

 

　　2、HTML代码

 

　　<divclass="albumalbumvideo">

 

　　<div>

 

　　<pclass="type_title">

 

　　<span>视频介绍</span>

 

　　</p>

 

　　<divclass="pic_img">

 

　　<divclass="pic_img_box">

 

　　<el-uploadclass="avatar-uploader"

 

　　action="上传地址"

 

　　v-bind:data="{FoldPath:'上传目录',SecretKey:'安全验证'}"

 

　　v-bind:on-progress="uploadVideoProcess"

 

　　v-bind:on-success="handleVideoSuccess"

 

　　v-bind:before-upload="beforeUploadVideo"

 

　　v-bind:show-file-list="false">

 

　　<videov-if="videoForm.showVideoPath!=''&&!videoFlag"

 

　　v-bind:src="videoForm.showVideoPath"

 

　　class="avatarvideo-avatar"

 

　　controls="controls">

 

　　您的浏览器不支持视频播放

 

　　</video>

 

　　<iv-else-if="videoForm.showVideoPath==''&&!videoFlag"

 

　　class="el-icon-plusavatar-uploader-icon"></i>

 

　　<el-progressv-if="videoFlag==true"

 

　　type="circle"

 

　　v-bind:percentage="videoUploadPercent"

 

　　style="margin-top:7px;"></el-progress>

 

　　</el-upload>

 

　　</div>

 

　　</div>

 

　　</div>

 

　　<pclass="Upload_pictures">

 

　　<span></span>

 

　　<span>最多可以上传1个视频，建议大小50M，推荐格式mp4</span>

 

　　</p>

 

　　</div>

 

　　3、JS代码

 

　　<script>

 

　　varvm=newVue({

 

　　el:'#app',

 

　　data:{

 

　　videoFlag:false,

 

　　//是否显示进度条

 

　　videoUploadPercent:"",

 

　　//进度条的进度，

 

　　isShowUploadVideo:false,

 

　　//显示上传按钮

 

　　videoForm:{

 

　　showVideoPath:''

 

　　}

 

　　},

 

　　methods:{

 

　　//上传前回调

 

　　beforeUploadVideo(file){

 

　　varfileSize=file.size/1024/1024<50;

 

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

 

　　layer.msg("请上传正确的视频格式");

 

　　returnfalse;

 

　　}

 

　　if(!fileSize){

 

　　layer.msg("视频大小不能超过50MB");

 

　　returnfalse;

 

　　}

 

　　this.isShowUploadVideo=false;

 

　　},

 

　　//进度条

 

　　uploadVideoProcess(event,file,fileList){

 

　　this.videoFlag=true;

 

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

 

　　},

 

　　//上传成功回调

 

　　handleVideoSuccess(res,file){

 

　　this.isShowUploadVideo=true;

 

　　this.videoFlag=false;

 

　　this.videoUploadPercent=0;

 

　　//前台上传地址

 

　　//if(file.status=='success'){

 

　　//this.videoForm.showVideoPath=file.url;

 

　　//}else{

 

　　//layer.msg("上传失败，请重新上传");

 

　　//}

 

　　//后台上传地址

 

　　if(res.Code==0){

 

　　this.videoForm.showVideoPath=res.Data;

 

　　}else{

 

　　layer.msg(res.Message);

 

　　}

 

　　}

 

　　}

 

　　})

 

　　</script>

 

　　4、后台代码

 

　　///<summary>

 

　　///上传视频

 

　　///</summary>

 

　　///<returns></returns>

 

　　[HttpPost]

 

　　publicIHttpActionResultUploadVideo()

 

　　{

 

　　try

 

　　{

 

　　varsecretKey=HttpContext.Current.Request["SecretKey"];

 

　　if(secretKey==null||!_secretKey.Equals(secretKey))

 

　　returnOk(newResult(-1,"验证身份失败"));

 

　　varfiles=HttpContext.Current.Request.Files;

 

　　if(files==null||files.Count==0)

 

　　returnOk(newResult(-1,"请选择视频"));

 

　　varfile=files[0];

 

　　if(file==null)

 

　　returnOk(newResult(-1,"请选择上传的视频"));

 

　　//存储的路径

 

　　varfoldPath=HttpContext.Current.Request["FoldPath"];

 

　　if(foldPath==null)

 

　　foldPath="/Upload";

 

　　foldPath="/UploadFile"+"/"+foldPath;

 

　　if(foldPath.Contains("../"))

 

　　foldPath=foldPath.Replace("../","");

 

　　//校验是否有该文件夹

 

　　varmapPath=AppDomain.CurrentDomain.BaseDirectory+foldPath;

 

　　if(!Directory.Exists(mapPath))

 

　　Directory.CreateDirectory(mapPath);

 

　　//获取文件名和文件扩展名

 

　　varextension=Path.GetExtension(file.FileName);

 

　　if(extension==null||!".ogg|.flv|.avi|.wmv|.rmvb|.mov|.mp4".Contains(extension.ToLower()))

 

　　returnOk(newResult(-1,"格式错误"));

 

　　stringnewFileName=Guid.NewGuid()+extension;

 

　　stringabsolutePath=string.Format("{0}/{1}",foldPath,newFileName);

 

　　file.SaveAs(AppDomain.CurrentDomain.BaseDirectory+absolutePath);

 

　　stringfileUrl=string.Format("{0}://{1}{2}",HttpContext.Current.Request.Url.Scheme,HttpContext.Current.Request.Url.Authority,absolutePath);

 

　　returnJson(newResultData(0,"success",fileUrl));

 

　　}

 

　　catch(Exceptione)

 

　　{

 

　　Logger.Error("UploadVideoiserror",GetType(),e);

 

　　returnJson(newResult(-1,"上传失败"));

 

　　}

 

　　}

 

　　三、总结

 

　　注意：Web.Config文件配置之限制上传文件大小和时间的属性配置(1KB=1024B1MB=1024KB1GB=1024MB)

 

　　在Web.Config文件中配置限制上传文件大小与时间字符串时，是在<httpRuntime><httpRuntime/>节中完成的，需要设置以下2个属性：

 

　　maxRequestLength属性：该限制可用于防止因用户将大量文件传递到该服务器而导致的拒绝服务攻击。指定的大小以KB为单位,默认值为4096KB(4MB)。

 

　　executionTimeout属性：指定在ASP.NET应用程序自动关闭前,允许执行请求的最大秒数。单位为秒,默认值为110s。