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>

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=1024B1MB=1024KB1GB=1024MB)

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

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

到此这篇关于Vue+Element UI 实现视频上传功能的文章就介绍到这了,更多相关vue视频上传内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • Vue+elementUI实现多图片上传与回显功能(含回显后继续上传或删除)

    最近有使用vue+elementUI实现多图片上传的需求,遂做此纪录. 本次主要写一下前端的实现细节,至于后台以Multipart[ ]数组接收即可,不再赘述,网上一搜大把文章可供参考. 本次使用elementui的上传图片控件的照片墙类型,其使用示例可具体查看官方文档 Elementui 多图上传控件 需要注意的是,官方文档中的示例采用自动上传的方式,大多数情况我们是需要点击上传按钮或和表单一起提交才开始上传的(即手动上传),此时官方的示例就不满足我们的需求了.怎么办?当然是自己动手丰衣足食啦

  • vue+element_ui上传文件,并传递额外参数操作

    需求: 1.文件大小验证 2.文件类型验证 3.额外参数传输 <template> <el-upload class="upload-demo" action :limit="1" :file-list="formFileList" :http-request="handleUploadForm" :on-exceed="formHandleExceed" :on-remove="

  • 详解Vue ElementUI手动上传excel文件到服务器

    概述 具体需求场景如下: 选择excel文件后,需要把导入的excel文件手动上传到后台服务器,并将导入成功后的统计结果显示出来.官网也有手动上传的示例,通过 action="url" 传入地址的方式,但在实际项目中请求需要自己配置,下面具体说明实现的方法. 说明: 在上传文件到展示统计结果,我们后端给了两个接口:首先调用文件上传接口,上传成功后,根据后端返回的mark再调用统计结果接口. 属性设置 .vue文件 <el-row> <div class="e

  • vue中使用elementUI组件手动上传图片功能

    Vue框架简介 Vue是一套构建用户界面的框架, 开发只需要关注视图层, 它不仅易于上手,还便于与第三方库或既有项目的整合.是基于MVVM(Model-View-ViewModel)设计思想.提供MVVM数据双向绑定的库,专注于UI层面 使用elementUI上传图片时遇到跨域问题,所以需要自己写一个手动上传图片的方法 代码: html <el-upload class="upload-demo" ref="upload"//绑定ref 清空时会用到 :lim

  • Vue+Element UI 实现视频上传功能

    一.前言 项目中需要提供一个视频介绍,使用户能够快速.方便的了解如何使用产品以及注意事项. 前台使用Vue+Element UI中的el-upload组件实现视频上传及进度条展示,后台提供视频上传API并返回URL. 二.具体实现 1.效果图展示 2.HTML代码 <div class="album albumvideo"> <div> <p class="type_title"> <span>视频介绍</spa

  • Vue Element UI + OSS实现上传文件功能

    Element提供了upload上传组件,可以查看官网upload组件的详细介绍:查看upload组件的上传源码upload/ajax,使用的是XHR对象上传文件.在项目实践中,发现该上传方法上传大文件时会出现问题,所以决定使用阿里云对象存储服务(Object Storage Service,简称OSS),OSS详细介绍可以查看官网,本文主要讲解的是OSS上传文件的前端,后台开发请查看官网介绍,SDK Browser.js讲解了前端如何进行上传. 1.使用npm安装SDK的开发包: npm in

  • vue结合el-upload实现腾讯云视频上传功能

    起因 根据需求要实现一个视频上传功能,之前采用七牛云上传,小点视频没问题,大体积视频比如600M左右,再考虑到网速等其他原因就会花费半个小时左右. 后来分析到不仅要考虑上传时间的问题,更重要的是要考虑用户使用4G 网络的情况,考虑用户的流量,线上的视频,不能不做压缩转码,就放到页面上,视频不是图片,不能甩到 cdn 上就行了. 要考虑视频大小,pc 移动端适配,转码,还有防盗版等问题. 最终决定使用腾讯云上传视频,我的项目是web端上传,参考以下链接 官网链接:cloud.tencent.com

  • element UI upload组件上传附件格式限制方法

    如下所示: <el-upload :action="uploadUrl" ref="upload" :multiple="false" :on-change="fileChange" :before-upload="beforeUpload" :on-success="handleAvatarSuccess" :on-preview="file_click" c

  • 使用Vue+Spring Boot实现Excel上传功能

    1.使用Vue-Cli创建前端项目 运用vue-cli工具可以很轻松地构建前端项目,当然,使用WebStorm来构建会更加简洁(如图).本文推荐使用WebStorm,因为在后续开发中,IDE会使我们的开发更加简洁.部分配置如图: 2.Navbar编写 作为一个WebApp,Navbar作为应用的导航栏是必不可少的.在本项目中,笔者引入了bootstrap对Navbar进行了轻松地构建.在vue中我们需要在components文件夹中将我们的组件加进去,对于本工程来说,Navbar是我们要加入的第

  • vue实现视频上传功能

    本文实例为大家分享了vue实现视频上传功能的具体代码,供大家参考,具体内容如下 环境:vue + TS 上传视频 + 上传到阿里云 主要处理前端在vue下上传视频 使用的是阿里云的视频点播服务 1.需要后台去申请一个开发API,请求阿里云的接口访问控制 2.有了开发视频的token,供给前端 3.前端去请求阿里云存储 video.vue <template> <div class="container"> <el-card> <div slot

  • vue+axios+java实现文件上传功能

    本文实例为大家分享了vue+axios+java实现文件上传的具体代码,供大家参考,具体内容如下 背景 vue.js + axios + element前端,Java后台实现的文件上传,简单例子 前端代码 document.vue <template>   <div>     <el-row class="action-row">       <el-col :span="9">         <el-butt

  • vue实现移动端图片上传功能

    本文实例为大家分享了vue实现移动端图片上传的具体代码,供大家参考,具体内容如下 <template> <div class="box"> <div class="upDiv"> {{labTex}} //标题 //上传按钮 <input ref="uploadInput" type="file" class='upinp' name="file" value=&q

  • js实现带进度条提示的多视频上传功能

    本文实例为大家分享了js带进度条上传多视频的具体代码,供大家参考,具体内容如下 效果: 引用: <link rel="stylesheet" href="bootstrap.css" rel="external nofollow" > <script src="jquery.fileupload.js"></script> <script src="http://malsup

  • vue实现pc端拍照上传功能

    本文实例为大家分享了vue实现pc端拍照上传功能的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF8"> </head> <body> <div id="contentHolder"> <video id="video" width="320" heigh

随机推荐