Vue+Element UI 实现视频上传

1.html代码

    

        

            视频介绍
        
        

            

                
                    
                    
                    
                
            
        
    
    

        
        最多可以上传1个视频，建议大小50M，推荐格式mp4
    

2.js代码

 

3.后台代码

 

/// 

/// 上传视频
/// 
/// 
[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, "上传失败"));
    }
}

注意:springboot项目需要配置上传视频文件大小和时间限制属性