一、前言

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

前台使用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(-, "验证身份失败"));
var files = HttpContext.Current.Request.Files;
if (files == null || files.Count == )
return Ok(new Result(-, "请选择视频"));
var file = files[];
if (file == null)
return Ok(new Result(-, "请选择上传的视频"));
//存储的路径
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(-, "格式错误")); 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(, "success",fileUrl));
}
catch (Exception e)
{
Logger.Error("UploadVideo is error", GetType(), e);
return Json(new Result(-, "上传失败"));
}
}

三、总结

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

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

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

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

Vue+Element UI 实现视频上传的更多相关文章

  1. element ui实现手动上传文件,且只能上传单个文件,并能覆盖上传。

    element ui提供了成熟的组件场景,但实际工作中难免会遇到认(sha)真(diao)的产品.比如,最近遇到的,要求实现手动上传特定格式文件(用户点击“上传文件”按钮,确定之后,只是单纯选择了文件 ...

  2. vue+element+upload实现头像上传

    后台 @RequestMapping("/up") public JSONObject up(@RequestParam("picFile") Multipar ...

  3. Element UI中的上传文件功能

    上传文件给后台: <el-upload style="display:inline-block" :limit=" class="upload-demo& ...

  4. vue+element ui 的上传文件使用组件

    前言:工作中用到 vue+element ui 的前端框架,使用到上传文件,则想着封装为组件,达到复用,可扩展.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9 ...

  5. vue + element ui 表格自定义表头,提供线上demo

    前言:工作中用到 vue+element ui 的前端框架,需要使用自定义表头,需要使用 re.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9710826.h ...

  6. vue 接入 vod-js-sdk-v6.js 完成视频上传

    东西有点多,耐心看完.按照操作一步一步来,绝对能成功 首先:npm 引入 npm install vod-js-sdk-v6 mian.js  全局引入  //腾讯云点播 import TcVod f ...

  7. input实现图片或视频上传(样式+代码)

    背景:vue/element.ui 1..html: <div v-show="recordForm.resourceType==1"> <el-form-ite ...

  8. 基于 vue+element ui 的cdn网站(多页面,都是各种demo)

    前言:这个网站持续更新中...,有网上预览,github上也有源码,喜欢记得star哦,欢迎留言讨论. 网站地址:我的个人vue+element ui demo网站 github地址:yuleGH g ...

  9. 腾讯云点播视频存储(Web端视频上传)

    官方文档 前言 所谓视频上传,是指开发者或其用户将视频文件上传到点播的视频存储中,以便进行视频处理.分发等. 一.简介 腾讯云点播支持如下几种视频上传方式: 控制台上传:在点播控制台上进行操作,将本地 ...

随机推荐

  1. 并发编程实战之并发下的socket套接字编程

    目录 一.python单线程下实现多个socket并发 1.1 服务端 1.2 客户端 一.python单线程下实现多个socket并发 1.1 服务端 import sys # import soc ...

  2. body标签添加ontouchstart属性

    之前看别人的代码,发现他的body标签添加ontouchstart属性.即 <body ontouchstart> 上网查了一下原因,记录一下: 这个操作是进行手机端兼容处理的,防止伪类: ...

  3. Java设计模式:Proxy(代理)模式

    概念定义 代理模式是一种使用代理对象来执行目标对象的方法并在代理对象中增强目标对象方法的一种设计模式. 使用代理模式的原因有: 中介隔离作用:在某些情况下,一个客户类不想或者不能直接引用一个委托对象, ...

  4. laravel项目本地数据库连接错乱原因和解决方法

    由于在本地建了两个laravel项目,test.me 和 api-test.me,当我在 test.me 中调用 curl 去请求 api-test.me 的方法,试图获取数据时, 接口一直返回没有找 ...

  5. 使用celery执行Django串行异步任务

    Django项目有一个耗时较长的update过程,希望在接到请求运行update过程的时候,Django应用仍能正常处理其他的请求,并且update过程要求不能并行,也不能漏掉任何一个请求 使用cel ...

  6. solidity智能合约implicit conversion异常

    问题场景 在使用^0.5.10版本的solidity时,如果使用this关键字会出现以下问题. 代码: require(tokenContract.balanceOf(this) >= _num ...

  7. 代码生成工具Database2Sharp的架构介绍

    1)代码生成工具介绍 Database2Sharp是一款代码生成工具和数据库文档生成工具,该工具从2005年开始至今,一直伴随着我们的客户和粉丝们经历着过各种各样的项目开发,在实际开发中能带来效率的提 ...

  8. WPF中Button的背景图片,实现禁止IsMouseOver时显示默认

    <Button x:Name="btnPickUpNum" Click="PickUpNum_OnClick" Grid.Row="1" ...

  9. .NET MVC5简介(三)Result

    Ajax请求数据响应格式,一个醒目组必须是同意的,前端才知道怎么应付,还有很多其他情况,比如异常了,有ExceptionFilter,按照固定格式返回,比如没有权限,Authorization,按照固 ...

  10. mysql connector c++ 1.1 API初步体验

    mysql connector c++ 1.1 API初步体验 1,常用的头文件 #include <mysql_connection.h> #include <mysql_driv ...