经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » Vue.js » 查看文章
Vue+Element UI 实现视频上传
来源:cnblogs  作者:Crazy Struggle  时间:2019/7/25 8:45:20  对本文有异议

一、前言

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

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

二、具体实现

1、效果图展示 

                                      

2、HTML代码

  1. <div class="album albumvideo">
  2. <div>
  3. <p class="type_title">
  4. <span>视频介绍</span>
  5. </p>
  6. <div class="pic_img">
  7. <div class="pic_img_box">
  8. <el-upload class="avatar-uploader"
  9. action="上传地址"
  10. v-bind:data="{FoldPath:'上传目录',SecretKey:'安全验证'}"
  11. v-bind:on-progress="uploadVideoProcess"
  12. v-bind:on-success="handleVideoSuccess"
  13. v-bind:before-upload="beforeUploadVideo"
  14. v-bind:show-file-list="false">
  15. <video v-if="videoForm.showVideoPath !='' && !videoFlag"
  16. v-bind:src="videoForm.showVideoPath"
  17. class="avatar video-avatar"
  18. controls="controls">
  19. 您的浏览器不支持视频播放
  20. </video>
  21. <i v-else-if="videoForm.showVideoPath =='' && !videoFlag"
  22. class="el-icon-plus avatar-uploader-icon"></i>
  23. <el-progress v-if="videoFlag == true"
  24. type="circle"
  25. v-bind:percentage="videoUploadPercent"
  26. style="margin-top:7px;"></el-progress>
  27. </el-upload>
  28. </div>
  29. </div>
  30. </div>
  31. <p class="Upload_pictures">
  32. <span></span>
  33. <span>最多可以上传1个视频,建议大小50M,推荐格式mp4</span>
  34. </p>
  35. </div>

3、JS代码

  1. <script>
  2. var vm = new Vue({
  3. el: '#app',
  4. data: {
  5. videoFlag: false,
  6. //是否显示进度条
  7. videoUploadPercent: "",
  8. //进度条的进度,
  9. isShowUploadVideo: false,
  10. //显示上传按钮
  11. videoForm: {
  12. showVideoPath: ''
  13. }
  14. },
  15. methods: {
  16. //上传前回调
  17. beforeUploadVideo(file) {
  18. var fileSize = file.size / 1024 / 1024 < 50;
  19. if (['video/mp4', 'video/ogg', 'video/flv', 'video/avi', 'video/wmv', 'video/rmvb', 'video/mov'].indexOf(file.type) == -1) {
  20. layer.msg("请上传正确的视频格式");
  21. return false;
  22. }
  23. if (!fileSize) {
  24. layer.msg("视频大小不能超过50MB");
  25. return false;
  26. }
  27. this.isShowUploadVideo = false;
  28. },
  29. //进度条
  30. uploadVideoProcess(event, file, fileList) {
  31. this.videoFlag = true;
  32. this.videoUploadPercent = file.percentage.toFixed(0) * 1;
  33. },
  34. //上传成功回调
  35. handleVideoSuccess(res, file) {
  36. this.isShowUploadVideo = true;
  37. this.videoFlag = false;
  38. this.videoUploadPercent = 0;
  39. //前台上传地址
  40. //if (file.status == 'success' ) {
  41. // this.videoForm.showVideoPath = file.url;
  42. //} else {
  43. // layer.msg("上传失败,请重新上传");
  44. //}
  45.  
  46. //后台上传地址
  47. if (res.Code == 0) {
  48. this.videoForm.showVideoPath = res.Data;
  49. } else {
  50. layer.msg(res.Message);
  51. }
  52. }
  53. }
  54. })
  55. </script>

4、后台代码

  1. /// <summary>
  2. /// 上传视频
  3. /// </summary>
  4. /// <returns></returns>
  5. [HttpPost]
  6. public IHttpActionResult UploadVideo()
  7. {
  8. try
  9. {
  10. var secretKey = HttpContext.Current.Request["SecretKey"];
  11. if (secretKey == null || !_secretKey.Equals(secretKey))
  12. return Ok(new Result(-1, "验证身份失败"));
  13. var files = HttpContext.Current.Request.Files;
  14. if (files == null || files.Count == 0)
  15. return Ok(new Result(-1, "请选择视频"));
  16. var file = files[0];
  17. if (file == null)
  18. return Ok(new Result(-1, "请选择上传的视频"));
  19. //存储的路径
  20. var foldPath = HttpContext.Current.Request["FoldPath"];
  21. if (foldPath == null)
  22. foldPath = "/Upload";
  23. foldPath = "/UploadFile" + "/" + foldPath;
  24. if (foldPath.Contains("../"))
  25. foldPath = foldPath.Replace("../", "");
  26. //校验是否有该文件夹
  27. var mapPath = AppDomain.CurrentDomain.BaseDirectory + foldPath;
  28. if (!Directory.Exists(mapPath))
  29. Directory.CreateDirectory(mapPath);
  30. //获取文件名和文件扩展名
  31. var extension = Path.GetExtension(file.FileName);
  32. if (extension == null || !".ogg|.flv|.avi|.wmv|.rmvb|.mov|.mp4".Contains(extension.ToLower()))
  33. return Ok(new Result(-1, "格式错误"));
  34. string newFileName = Guid.NewGuid() + extension;
  35. string absolutePath = string.Format("{0}/{1}", foldPath, newFileName);
  36. file.SaveAs(AppDomain.CurrentDomain.BaseDirectory + absolutePath);
  37. string fileUrl = string.Format("{0}://{1}{2}", HttpContext.Current.Request.Url.Scheme, HttpContext.Current.Request.Url.Authority, absolutePath);
  38. return Json(new ResultData(0, "success",fileUrl));
  39. }
  40. catch (Exception e)
  41. {
  42. Logger.Error("UploadVideo is error", GetType(), e);
  43. return Json(new Result(-1, "上传失败"));
  44. }
  45. }

三、总结

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

     

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

  • maxRequestLength属性:该限制可用于防止因用户将大量文件传递到该服务器而导致的拒绝服务攻击。指定的大小以KB为单位,默认值为4096KB(4MB)。
  • executionTimeout属性:指定在ASP.NET应用程序自动关闭前,允许执行请求的最大秒数。单位为秒,默认值为110s。 

 

优秀是一种习惯,欢迎大家关注学习 

原文链接:http://www.cnblogs.com/1312mn/p/11233395.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号