Vue + Element UI for video uploads

I. Introduction

  Projects need to provide a video introduction that enables users to quickly and easily learn how to use the product and precautions.

  Reception using Vue + Element UI in el-upload component for video uploading and progress bar display, video upload API provides the background and return URL.

Second, the specific implementation

1, showing the effect of FIG. 

                                      

2, HTML Code

<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: 'security verification'} "
                           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</
                        Your browser does not support video playback
                    
                    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 > can upload up to a video, the proposed size 50M, recommended format MP4 </ span > 
    </ the p- > 
</ div >

3, JS Code

<Script>
     var VM = new new Vue ({ 
        EL: '#app' , 
        Data: { 
            videoFlag: to false ,
             // whether to display the progress bar 
            videoUploadPercent: "" ,
             // the progress bar work, 
            isShowUploadVideo: to false ,
             // display upload button 
            videoForm: { 
                showVideoPath: '' 
            } 
        }, 
        Methods: { 
            // before uploading callback 
            beforeUploadVideo (File) {
                 varfile.size = fileSize / 1024/1024 <50 ;
                 IF ([ 'Video / MP4', 'Video / OGG', 'Video / FLV', 'Video / AVI', 'Video / WMV', 'Video / RMVB' , 'video / MOV'] the indexOf (file.type) == -1. ) { 
                    layer.msg ( "Please upload the correct video format" );
                     return  to false ; 
                } 
                IF ! ( fileSize) { 
                    layer.msg ( "video size can not exceed 50MB " );
                     return  to false ; 
                } 
                the this .isShowUploadVideo = to false ; 
            }, 
            // progress bar
            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;
                //The else {} 
                //      layer.msg ( "failed to upload, please re-upload"); 
                // } 

                // background upload address 
                IF (res.Code == 0 ) {
                     the this .videoForm.showVideoPath = res.Data; 
                } the else { 
                    layer.msg (res.Message); 
                } 
            } 
        } 
    })
 </ Script>

4, code-behind

/// <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 new the Result (- . 1 , " select Video " ));
         var File = Files [ 0 ];
         IF (File == null )
             return Ok ( new new the Result (- . 1 , " please select a video upload " ));
         // stored path              
        var foldPath HttpContext.Current.Request = [ " FoldPath " ];
         IF (== foldPathnull ) 
            foldPath = " / the Upload " ; 
        foldPath = " / UploadFile " + " / " + foldPath;
         IF (foldPath.Contains ( " ../ " )) 
            foldPath = foldPath.Replace ( " ../ " , "" ) ;
         // check if there is the folder 
        var MapPath + = AppDomain.CurrentDomain.BaseDirectory foldPath;
         iF (! Directory.Exists(mapPath))
            Directory.CreateDirectory(mapPath);
         // get the file name and file extension 
        var Extension = Path.GetExtension (file.FileName);
         IF (Extension == null ||! " .Ogg | .flv | .avi | .wmv |. RMVB | .mov | .mp4 " .Contains (extension.ToLower ()))
             return Ok ( new new the Result (- . 1 , " format error " )); 

        String newfilename Guid.NewGuid = () + Extension;
         String the absolutePath = String . the Format ( " {0} / {}. 1 " , foldPath, newfilename); 
        file.SaveAs (AppDomain.CurrentDomain.BaseDirectory + the 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, " Upload Failed " )); 
    } 
}

Third, the summary

  Note: The properties configuration file to configure the Web.Config limit upload file size and time (1KB = 1024B 1MB = 1024KB 1GB = 1024MB)

     

  In Web.Config configuration file upload file size limit and time string, is done in the <httpRuntime> </ httpRuntime> section, set the following two properties:

• maxRequestLength property: This limitation can be used to prevent denial of service attacks because a large number of users to transfer files to the server caused. The size specified in KB, the default value 4096KB (4MB).
• executionTimeout attribute: Specifies the application before ASP.NET automatically turned off to allow the maximum number of seconds of execution. Seconds, the default value 110s. 

 

Is a good habit, welcome attention to learning