欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue+Element UI 實現(xiàn)視頻上傳功能

 更新時間:2022年01月06日 15:27:44   作者:Crazy Struggle  
這篇文章主要介紹了Vue+Element UI 實現(xiàn)視頻上傳功能,前臺使用Vue+Element UI中的el-upload組件實現(xiàn)視頻上傳及進度條展示,后臺提供視頻上傳API并返回URL,具體實現(xiàn)代碼及效果展示跟隨小編一起看看吧

一、前言

項目中需要提供一個視頻介紹,使用戶能夠快速、方便的了解如何使用產(chǎn)品以及注意事項。

前臺使用Vue+Element UI中的el-upload組件實現(xiàn)視頻上傳及進度條展示,后臺提供視頻上傳API并返回URL。

二、具體實現(xiàn)

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: {
            //上傳前回調(diào)
            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;
            },
            //上傳成功回調(diào)
            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, "上傳失敗"));
    }
}

三、總結(jié)

注意:Web.Config文件配置之限制上傳文件大小和時間的屬性配置(1KB=1024B1MB=1024KB1GB=1024MB)

在Web.Config文件中配置限制上傳文件大小與時間字符串時,是在<httpRuntime><httpRuntime/>節(jié)中完成的,需要設(shè)置以下2個屬性:

maxRequestLength屬性:該限制可用于防止因用戶將大量文件傳遞到該服務(wù)器而導(dǎo)致的拒絕服務(wù)攻擊。指定的大小以KB為單位,默認(rèn)值為4096KB(4MB)。executionTimeout屬性:指定在ASP.NET應(yīng)用程序自動關(guān)閉前,允許執(zhí)行請求的最大秒數(shù)。單位為秒,默認(rèn)值為110s。

到此這篇關(guān)于Vue+Element UI 實現(xiàn)視頻上傳功能的文章就介紹到這了,更多相關(guān)vue視頻上傳內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • 實現(xiàn)一個簡單的vue無限加載指令方法

    實現(xiàn)一個簡單的vue無限加載指令方法

    vue 中的自定義指令是對底層 dom 進行操作,下面以實現(xiàn)滾動到底部加載數(shù)據(jù),實現(xiàn)無限加載來介紹如何自定義一個簡單的指令。
    2017-01-01
  • 基于vue循環(huán)列表時點擊跳轉(zhuǎn)頁面的方法

    基于vue循環(huán)列表時點擊跳轉(zhuǎn)頁面的方法

    今天小編就為大家分享一篇基于vue循環(huán)列表時點擊跳轉(zhuǎn)頁面的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-08-08
  • WEB前端性能優(yōu)化的7大手段詳解

    WEB前端性能優(yōu)化的7大手段詳解

    本文將詳細(xì)介紹前端性能優(yōu)化的7大手段,包括減少請求數(shù)量、減小資源大小、優(yōu)化網(wǎng)絡(luò)連接、優(yōu)化資源加載、減少重繪回流、使用性能更好的API和構(gòu)建優(yōu)化
    2020-02-02
  • 基于Vue SEO的四種方案(小結(jié))

    基于Vue SEO的四種方案(小結(jié))

    這篇文章主要介紹了基于Vue SEO的四種方案,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-07-07
  • vue項目中仿element-ui彈框效果的實例代碼

    vue項目中仿element-ui彈框效果的實例代碼

    這篇文章主要介紹了vue項目中仿element-ui彈框效果的實例代碼,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下
    2019-04-04
  • Vue中使用和移除總線Bus的注意事項詳解

    Vue中使用和移除總線Bus的注意事項詳解

    Vue中的總線Bus是一種通信機制,可用于組件間的數(shù)據(jù)傳遞和事件觸發(fā)。使用時需要注意Bus的命名和定義、監(jiān)聽和觸發(fā)事件的方法、移除和銷毀Bus的時機和方式等問題。合理使用總線Bus可以提高組件的復(fù)用性和可維護性,但過度依賴可能會導(dǎo)致代碼耦合和難以維護
    2023-04-04
  • vue組件學(xué)習(xí)教程

    vue組件學(xué)習(xí)教程

    這篇文章主要為大家詳細(xì)介紹了vue組件學(xué)習(xí)教程,根據(jù)Vue官方文檔學(xué)習(xí)的筆記,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-09-09
  • Vue實現(xiàn)監(jiān)聽某個元素滾動,親測有效

    Vue實現(xiàn)監(jiān)聽某個元素滾動,親測有效

    這篇文章主要介紹了Vue實現(xiàn)監(jiān)聽某個元素滾動,親測有效!具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-07-07
  • Vue.extend 編程式插入組件的實現(xiàn)

    Vue.extend 編程式插入組件的實現(xiàn)

    這篇文章主要介紹了Vue.extend 編程式插入組件的實現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-11-11
  • VUE中$refs的基本用法舉例

    VUE中$refs的基本用法舉例

    ref 加在子組件上,用this.$refs.(ref值) 獲取到的是組件實例,可以使用組件的所有方法,?在使用方法的時候直接this.$refs.(ref值).方法() 就可以使用了,這篇文章主要介紹了VUE中$refs的基本用法,需要的朋友可以參考下
    2022-12-12

最新評論