一、前言
項目中需要提供一個視訊介紹，使使用者能夠快速、友善的了解如何使用産品以及注意事項。
前台使用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。
優秀是一種習慣，歡迎大家關注學習