视频电商网站vue+七牛JSSDK集成(3)上传视频时暂停和续传

Advertisement

1、准备2个图片
视频电商网站vue+七牛JSSDK集成(3)上传视频时暂停和续传

2、这是我们用来控制视频上传/暂停 的按钮显示图片。
在vue.js的data() 里准备好变量(切换2个按钮图片的变量)

options:{
   iconsrc:'/icons/pause.png',
   uploadpause:'/icons/pause.png',
   uploadstart:'/icons/start.png'
},

3、编写切换按钮的事件
在vue.js的methods 里:

 pauseUpload(){
      if (this.options.iconsrc == this.options.uploadpause){
          //如果是暂停
          this.options.iconsrc = this.options.uploadstart; //修改图片为 开始
      }else{
          this.options.iconsrc = this.options.uploadpause;
      }
  }

4、把该事件绑定到html模板上

 <img :src="options.iconsrc" class="myicon" @click="pauseUpload">

视频电商网站vue+七牛JSSDK集成(3)上传视频时暂停和续传

ok,准备工作我们已经完成,下面就要来看看七牛云给我们的JSSDK中是如何处理 “文件上传和暂停的”

5、前面我们是在vue.js的mounted() 声明周期里,创建了一个七牛云的上传对象

var uploader = Qiniu.uploader({
    //...
})

但我们在pauseUpload() 这方法里,是拿不到uploader 这个七牛云的上传对象的。

我们需要先在data() 里添加变量数据:

qiniuUploader:null, //七牛云上传对象变量

然后在创建七牛云上传对象的时候赋值给这个变量:

this.qiniuUploader = Qiniu.uploader();

这样当点击页面上的”上传/暂停”按钮的时候,在触发pauseUpload() 方法中来控制七牛云的上传/暂停功能:

 pauseUpload(){
     if (this.options.iconsrc == this.options.uploadpause){
         //如果是暂停
         this.qiniuUploader.stop();

         this.options.iconsrc = this.options.uploadstart; //修改图片为 开始
     }else{
         this.qiniuUploader.start();

         this.options.iconsrc = this.options.uploadpause;
     }
 }

ok。现在我们已经完成了上传视频上暂停和续传功能了。

我们把整个publish.vue组件的代码也贴出来:

<template>
    <div>

        <el-dialog title="图片预览" v-model="isShowPic" size="small">
            <span>
                <img :src="video.v_pic.url">
            </span>
            <span slot="footer" class="dialog-footer">
          </span>
        </el-dialog>

        <el-form :model="video"  label-width="100px" class="demo-ruleForm">
            <el-col :span="12">
                <el-form-item label="视频标题" prop="v_title">
                    <el-input v-model="video.v_title" placeholder="请输入视频标题"></el-input>
                </el-form-item>
                <el-form-item label="视频分类" prop="v_class">
                    <el-select v-model="video.v_class" placeholder="请选择">
                        <el-option
                            v-for="item in this.$store.getters.navForVideoClass"
                            :label="item.nav_text"
                            :value="item.nav_id"
                        >
                            {{item.nav_text}}
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="视频封面" prop="v_pic">
                    <el-upload
                            action="http://localhost/yiiserver/web/index.php/video/upload"
                            type="drag"
                            :thumbnail-mode="true"
                            :on-preview="handlePreview"
                            :on-remove="handleRemove"
                            :on-success="handleSuccess"
                            :multiple="false"
                            name="Uploader[file]"
                    >
                        <i class="el-icon-upload"></i>
                        <div class="el-dragger__text">将文件拖到此处,或<em>点击上传</em></div>
                        <div class="el-upload__tip" slot="tip">只能上传jpg/png文件,且不超过500kb</div>
                    </el-upload>
                </el-form-item>

                <el-form-item label="标签">
                   <input-tag :tags="video.v_tags"  placeholder="输入标签后回车"></input-tag>
                </el-form-item>

                <el-form-item label="视频上传">
                    <div id="videoContainer" v-if="!isShowProgress">
                        <el-button id="selectVideo" type="primary">选择视频<i class="el-icon-upload el-icon--right"></i></el-button>

                    </div>
                    <div v-if="isShowProgress">
                        <el-progress :text-inside="true" :stroke-width="18" :percentage="videoProgressValue"></el-progress>
                        <img :src="options.iconsrc" class="myicon" @click="pauseUpload">
                    </div>
                </el-form-item>

                <el-form-item label="测试按钮">
                    <el-button type="primary" @click="testBtn">测试按钮</el-button>
                </el-form-item>
            </el-col>

            <el-col :span="12"></el-col>

        </el-form>
    </div>
</template>

<style>
    .myicon{width: 40px;cursor: pointer;}
</style>

<script>
    //引入组件
    import InputTag from 'vue-input-tag';

    export default{
        mounted(){
            var _this = this;

            this.qiniuUploader = Qiniu.uploader({
                runtimes: 'html5,flash,html4',      // 上传模式,依次退化
                browse_button: 'selectVideo',         // 上传选择的点选按钮,必需

                uptoken_url: 'http://localhost/yiiserver/web/index.php/video/uptoken',         // Ajax请求uptoken的Url,强烈建议设置(服务端提供)

                get_new_uptoken: false,             // 设置上传文件的时候是否每次都重新获取新的uptoken

                save_key: true,                  // 默认false。若在服务端生成uptoken的上传策略中指定了save_key,则开启,SDK在前端将不对key进行任何处理
                domain: 'videopro',     // bucket域名,下载资源时用到,必需
                container: 'videoContainer',             // 上传区域DOM ID,默认是browser_button的父元素
                max_file_size: '100mb',             // 最大文件体积限制
                flash_swf_url: '../plupload/Moxie.swf',  //引入flash,相对路径
                max_retries: 3,                     // 上传失败最大重试次数
                dragdrop: true,                     // 开启可拖曳上传
                drop_element: 'videoContainer',          // 拖曳上传区域元素的ID,拖曳文件或文件夹后可触发上传
                chunk_size: '1mb',                  // 分块上传时,每块的体积
                auto_start: true,                   // 选择文件后自动上传,若关闭需要自己绑定事件触发上传
                init: {
                    'FilesAdded': function(up, files) {
                        plupload.each(files, function(file) {
                            // 文件添加进队列后,处理相关的事情
                        });
                    },
                    'BeforeUpload': function(up, file) {
                        // 每个文件上传前,处理相关的事情
                        _this.isShowProgress = true;
                    },
                    'UploadProgress': function(up, file) {
                        // 每个文件上传时,处理相关的事情
                        _this.videoProgressValue = file.precent;
                    },
                    'FileUploaded': function(up, file, info) {
                        // 每个文件上传成功后,处理相关的事情
                        // 其中info是文件上传成功后,服务端返回的json,形式如:
                        // {
                        //    "hash": "Fh8xVqod2MQ1mocfI4S4KpRL6D98",
                        //    "key": "gogopher.jpg"
                        //  }
                        // 查看简单反馈
                        // var domain = up.getOption('domain');
                        // var res = parseJSON(info);
                        // var sourceLink = domain +"/"+ res.key; 获取上传成功后的文件的Url
                    },
                    'Error': function(up, err, errTip) {
                        //上传出错时,处理相关的事情
                    },
                    'UploadComplete': function() {
                        //队列文件处理完毕后,处理相关的事情
                        _this.isShowProgress = false;
                    },
                    'Key': function(up, file) {
                        // 若想在前端对每个文件的key进行个性化处理,可以配置该函数
                        // 该配置必须要在unique_names: false,save_key: false时才生效
                        var key = "";
                        // do something with key here
                        return key
                    }
                }
            });
        },

        data(){
            return {
                qiniuUploader:null, //七牛云上传对象变量
                options:{
                    iconsrc:'/icons/pause.png',
                    uploadpause:'/icons/pause.png',
                    uploadstart:'/icons/start.png'
                },
                video:{
                    v_title:'',
                    v_class:2,
                    v_pic:{name:'',url:'',id:0},
                    v_tags:[],
                },
                isShowPic:false,
                videoProgressValue:0,
                isShowProgress:false,
            }
        },

        methods: {
            handleRemove(file, fileList) {
                //移除图片
                console.log(file, fileList);
                this.video.v_pic.url = '';
                this.video.v_pic.name = '';
            },
            handlePreview(file) {
                //预览图片
                console.log(file);
                this.isShowPic = true;
            },
            handleSuccess(file){
                //响应成功
                console.log(file);

                if(file.status ==1){
                    //保存后端返回来的数据
                    this.video.v_pic.url = file.url;
                    this.video.v_pic.name = file.name;
                    this.video.v_pic.id = file.img_id;
                }else{
                    alert('上传失败,,请稍后再试');
                }
            },
            testBtn(){
                alert(this.video.v_tags);
            },

            pauseUpload(){
                if (this.options.iconsrc == this.options.uploadpause){
                    //如果是暂停
                    this.qiniuUploader.stop();

                    this.options.iconsrc = this.options.uploadstart; //修改图片为 开始
                }else{
                    this.qiniuUploader.start();

                    this.options.iconsrc = this.options.uploadpause;
                }
            }
        },

        components:{
            'input-tag':InputTag, //注册组件
        }
    }
</script>

Similar Posts:

  • 大型网站架构系列:电商网站架构案例(3)

    本文章是电商网站架构案例的第三篇,主要介绍数据库集群,读写分离,分库分表,服务化,消息队列的使用,以及本电商案例的架构总结. 6.5数据库集群(读写分离,分库分表) 大型网站需要存储海量的数据,为达到海量数据存储,高可用,高性能一般采用冗余的方式进行系统设计.一般有两种方式读写分离和分库分表. 读写分离:一般解决读比例远大于写比例的场景,可采用一主一备,一主多备或多主多备方式. 本案例在业务拆分的基础上,结合分库分表和读写分离.如下图: (1) 业务拆分后:每个子系统需要单独的库: (2) 如果

  • 那些年干过的事(一)—php电商网站入侵及防护

    背景 偶遇一从事电商的朋友,闲谈说到了他的电商网站,他不理解自己的网站是如何被破解的,问我能否帮忙看看他的网站存在哪些安全漏洞,说实话当时偶并没有研究过网站破解及安全防护,也是一时兴起抱着学习的态度答应了朋友. 目标: 寻找网站漏洞获取后台数据,提供修复建议 工具及手段: google.UE.Sqlyog.SQL注入 方式方法: 1.了解目标网站 访问朋友网站,通过网站风格.网页后缀.版权信息等判断网站为基于开源EC-SHOP进行简单整合后部署的,开发语言php,版本号v2.5.0. 2.搜索资

  • 电商网站注册界面设计超全面指南

    编者按:辗转已到第三课,趁着双十一还木有剁手之前,赶紧来学一篇超赞的登录界面设计指南!想想有一天你满心欢喜买了一篮子东西,刚想豪爽地叫小二买单,小二让你先注册,顿时欢喜近无.这时候就该设计师出场咯,今天我们分享10个技巧,帮访客高兴注册! @AnyForWeb :电子商务网站已经慢慢成为现代都市人的必需品,大家都乐此不疲的使用着,但对于第一次注册使用的情景,相信大家还记忆犹新.精心挑选完商品之后,用户们怀着愉快的心情点击购买按钮,但显示的却是"请先注册或登录",原本满满的购物欲和好心情

  • 3个被忽视策略帮你提升电商网站流量

    导语:SEO.关键词广告以及社交媒体和在线广告,这些都是电商网站为提高流量而使用的常见策略.但是为什么流量还没能达到你的期望值? 搜索引擎优化.关键词广告以及社交媒体和在线广告,这些都是电子商务网站为提高流量而使用的常见策略.但是为什么流量还没能达到你的期望值?提高网站流量(以及转化率)的努力不应该止步于这些流行的策略.以下是可能会对提高网站流量具有更大影响的方法. 对现有客户进行智能提醒 利用你现有的客户.如果关系处理得当的话,这些进行单次购买的用户可以转变成忠诚客户,进行重复性消费.在付款环

  • 前搜狐联席总裁王昕创办生鲜电商网站

    腾讯科技 雷建平 1月26日报道 腾讯科技今日获悉,前搜狐联席总裁兼首席运营官王昕已低调创办生鲜电商网站春播,目前该网站处于公测阶段,预计不久会正式推出. 数月前,曾有知情人士向腾讯科技透露,王昕已获得3亿元的外部投资,在做一家电商网站,腾讯科技曾向王昕求证,不过,当时王昕表示,自己尚处于禁业期,还处于休息阶段. 资料显示,王昕1999年加入搜狐公司,负责搜狐媒体.移动事业部.广告销售和市场等.在加盟搜狐15年后,王昕在2014年3月31日离职. 搜狐规定,从2014年4月1日至2014年底的过

  • 七牛JSSDK上传,可以不可以在选择文件以后再设置 token,domain,key

    七牛JSSDK 上传,可以不可以在选择文件以后再设置 token,domain,key --cut--

  • Radware最新研究报告:电商网站移动端Web性能未达客户预期

    Radware是一家全球领先的.面向虚拟和云数据中心的应用交付和应用安全解决方案提供商.今年七八月份,他们用四个周的时间仔细研究了Alexa.com网站上排名前100的电商网站,并于近日发表了研究报告<行业现状:移动端网页速度和Web性能>. 报告开始部分列举了以前的一些研究结论,说明了移动端Web性能对企业成功的重要性: 世界上,每四个人中就有一个人拥有智能手机: 花费在电商网站上的总时间有超过一半发生在移动设备上: 每位网上购物者在一次购买前平均要访问目标网站6.2次,平均会用到2.6种不

  • 电商网站模板

    个人开发的电商网站模板,大家捧捧场了!!! http://onex.site/ 大家提下个人意见,让我有所进步哈!

  • 雷锋读图:Pinterest正在改变电商网站

    Pinterest可谓是互联网的一个传奇,它从一个不起眼的图片分享网站演变成另一个价值15亿美元的社交网络公司,是不少创业人士想模仿的对象.随着Pinterest在社交网络上的地位不断上升,作为全球第三大的社交网络公司的它已经开始对各个领域产生了不同程度的影响.在电商方面,Pinterest为他们带来的推荐流量已经超过其他社交网络巨头,并推动了电商网站新的盈利模式.想知道Pinterest和电商网站之间的关系吗?请读下面的图. (抽水供雷锋网专稿,转载请注明!)

  • 中国十大电商网站优势与劣势分析

    [摘要]:2015各大电商平台分析,国内电商平台发展的现状.商业模式.盈利模式在哪里?它们的优势和劣势在哪里?56联盟小编将为您深入解析中国十大电商网站排行榜的优势与劣势:1.天猫商城:2.京东商城:3.苏宁易购:4.腾讯电商:5.唯品会:6.亚马逊中国:7.当当网:8.国美电商:9.1号店:10.凡客诚品. 据中国电子商务研究中心监测数据显示,截至2013年上半年中国网络购物市场上,天猫依靠其影响力牢牢占据第一位子,占50.4%:京东紧随其后名列第二,占据20.7%:较2012年上半年略有提高