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;
                
                //前台上传地址
                //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。 

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