标签：视频 Vue return Element foldPath UI file var 上传
原文链接：http://www.cnblogs.com/1312mn/p/11233395.html一、前言
项目中需要提供一个视频介绍，使用户能够快速、方便的了解如何使用产品以及注意事项。
前台使用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;
//前台上传地址
//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]
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, "格式错误"));
string newFileName = Guid.NewGuid() + extension;
string absolutePath = string.Format("{0}/{1}", foldPath, newFileName);
file.SaveAs(AppDomain.CurrentDomain.BaseDirectory + absolutePath);
string fileUrl = string.Format("{0}://{1}{2}", HttpContext.Current.Request.Url.Scheme, HttpContext.Current.Request.Url.Authority, absolutePath);
return Json(new ResultData(0, "success",fileUrl));
}
catch (Exception e)
{
Logger.Error("UploadVideo is error", GetType(), e);
return Json(new Result(-1, "上传失败"));
}
}
三、总结
注意：Web.Config文件配置之限制上传文件大小和时间的属性配置(1KB=1024B 1MB=1024KB 1GB=1024MB)
在Web.Config文件中配置限制上传文件大小与时间字符串时，是在<httpRuntime><httpRuntime/>节中完成的，需要设置以下2个属性：
- maxRequestLength属性：该限制可用于防止因用户将大量文件传递到该服务器而导致的拒绝服务攻击。指定的大小以KB为单位,默认值为4096KB(4MB)。
- executionTimeout属性：指定在ASP.NET应用程序自动关闭前,允许执行请求的最大秒数。单位为秒,默认值为110s。
优秀是一种习惯，欢迎大家关注学习
转载于:https://www.cnblogs.com/1312mn/p/11233395.html
标签：视频,Vue,return,Element,foldPath,UI,file,var,上传 来源： https://blog.csdn.net/weixin_30214077/article/details/98794955
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。