Vue+Element UI 实现视频上传
一、前言
项目中需要提供一个视频介绍，使用户能够快速、方便的了解如何使用产品以及注意事项。
前台使用 Vue+Element UI 中的 el-upload 组件实现视频上传及进度条展示，后台提供视频上传 API 并返回 URL。
二、具体实现
1、效果图展示
2、HTML 代码
<div class="album albumvideo"> <div> <p class="type_title"> <span>视频介绍</span> </p> <div class="pic_img"> <div class="pic_img_box"> <el-upload class="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"> <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" 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> </div> </div> </div> <p class="Upload_pictures"> <span></span> <span>最多可以上传 1 个视频，建议大小 50M，推荐格式 mp4</span> </p> </div>
3、JS 代码
<script>
var vm = new Vue({
el: '#app',
data: {
videoFlag: false,
//是否显示进度条
videoUploadPercent: "",
//进度条的进度，
isShowUploadVideo: false,
//显示上传按钮
videoForm: {
showVideoPath: ''
}
},
methods: {
//上传前回调
beforeUploadVideo(file) {
var fileSize = 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("请上传正确的视频格式");
return false;
}
if (!fileSize) {
layer.msg("视频大小不能超过 50MB");
return false;
}
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;
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">前台上传地址</span>
<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">if (file.status == 'success' ) {</span>
<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> this.videoForm.showVideoPath = file.url;</span>
<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">} else {</span>
<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> layer.msg("上传失败，请重新上传");</span>
<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">}</span>
<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">后台上传地址</span>
<span style="color: rgba(0, 0, 255, 1)">if</span> (res.Code == 0<span style="color: rgba(0, 0, 0, 1)">) {
</span><span style="color: rgba(0, 0, 255, 1)">this</span>.videoForm.showVideoPath =<span style="color: rgba(0, 0, 0, 1)"> res.Data;
} </span><span style="color: rgba(0, 0, 255, 1)">else</span><span style="color: rgba(0, 0, 0, 1)"> {
layer.msg(res.Message);
}
}
}
})
</script>
4、后台代码
/// <summary> /// 上传视频 /// </summary> /// <returns></returns> [HttpPost] public IHttpActionResult UploadVideo() { try { var secretKey = HttpContext.Current.Request["SecretKey"]; if (secretKey == null || !_secretKey.Equals(secretKey)) return Ok(new Result(-1, "验证身份失败")); var files = HttpContext.Current.Request.Files; if (files == null || files.Count == 0) return Ok(new Result(-1, "请选择视频")); var file = files[0]; if (file == null) return Ok(new Result(-1, "请选择上传的视频")); //存储的路径 var foldPath = HttpContext.Current.Request["FoldPath"]; if (foldPath == null) foldPath = "/Upload"; foldPath = "/UploadFile" + "/" + foldPath; if (foldPath.Contains("../")) foldPath = foldPath.Replace("../", ""); //校验是否有该文件夹 var mapPath = AppDomain.CurrentDomain.BaseDirectory + foldPath; if (!Directory.Exists(mapPath)) Directory.CreateDirectory(mapPath); //获取文件名和文件扩展名 var extension = Path.GetExtension(file.FileName); if (extension == null || !".ogg|.flv|.avi|.wmv|.rmvb|.mov|.mp4".Contains(extension.ToLower())) return Ok(new Result(-1, "格式错误"));</span><span style="color: rgba(0, 0, 255, 1)">string</span> newFileName = Guid.NewGuid() +<span style="color: rgba(0, 0, 0, 1)"> extension; </span><span style="color: rgba(0, 0, 255, 1)">string</span> absolutePath = <span style="color: rgba(0, 0, 255, 1)">string</span>.Format(<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">{0}/{1}</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">, foldPath, newFileName); file.SaveAs(AppDomain.CurrentDomain.BaseDirectory </span>+<span style="color: rgba(0, 0, 0, 1)"> absolutePath); </span><span style="color: rgba(0, 0, 255, 1)">string</span> fileUrl = <span style="color: rgba(0, 0, 255, 1)">string</span>.Format(<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">{0}://{1}{2}</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">, HttpContext.Current.Request.Url.Scheme, HttpContext.Current.Request.Url.Authority, absolutePath); </span><span style="color: rgba(0, 0, 255, 1)">return</span> Json(<span style="color: rgba(0, 0, 255, 1)">new</span> ResultData(<span style="color: rgba(128, 0, 128, 1)">0</span>, <span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">success</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">,fileUrl)); } </span><span style="color: rgba(0, 0, 255, 1)">catch</span><span style="color: rgba(0, 0, 0, 1)"> (Exception e) { Logger.Error(</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">UploadVideo is error</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">, GetType(), e); </span><span style="color: rgba(0, 0, 255, 1)">return</span> Json(<span style="color: rgba(0, 0, 255, 1)">new</span> Result(-<span style="color: rgba(128, 0, 128, 1)">1</span>, <span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">上传失败</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">)); }}
三、总结
注意：Web.Config 文件配置之限制上传文件大小和时间的属性配置 (1KB=1024B 1MB=1024KB 1GB=1024MB)
在 Web.Config 文件中配置限制上传文件大小与时间字符串时，是在 <httpRuntime><httpRuntime/> 节中完成的，需要设置以下 2 个属性：
- maxRequestLength 属性：该限制可用于防止因用户将大量文件传递到该服务器而导致的拒绝服务攻击。指定的大小以 KB 为单位,默认值为 4096KB(4MB)。
- executionTimeout 属性：指定在 ASP.NET 应用程序自动关闭前, 允许执行请求的最大秒数。单位为秒,默认值为 110s。
优秀是一种习惯，欢迎大家关注学习