视频电商网站vue+七牛jssdk集成上传视频时暂停和续传

关键词：

1、准备2个图片

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">

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>

七牛上传视频添加到队列时视频大小是否添加

最近在做视频分析的项目，遇到了一些关于七牛上传视频文件的问题。当选择的视频文件大于本地剩余空间时，则取消上传。‘FilesAdded‘:function(up,files){plupload.each(files,function(file,index){//重点在这里varfileSize=0;for(vari=0;i<files.lengt... 查看详情

关于上传视频到七牛的一些解决方案

<divclass="form-group"><label>上传视频：</label><divclass="my-upload"><divclass=""><inputtype="file"id="fileupload"name="fileupload"class=""/></div></div>< 查看详情

app上传大视频的一种解决方案

...逛，看能否赚点零花钱。哈～。看到一需求：相册读取大视频文件（上G），文件流读取，分片上传，禁止占用本地磁盘。最初想到读取视频文件用UIImagePickerController，文件流上传采用NSInputStream和NSOutputStream去解决。网上查找也有... 查看详情

ueditor1.4.3php如何上传图片到图片服务器（七牛）

...在有新版本你要的功能实现了，UEditor1.4.3版本-直接上传视频、附件、图片到七牛云存储，并且支持图片在线管理功能参考技术A嗯，到七牛的官方网站可以找到已经有集成好的插件了。如果是新网站首次将静态资源css,js,和图片上... 查看详情

采用七牛接口给视频添加水印功能

由于项目中用到视频水印功能，通过程序效率相对比较低。最后决定先把视频上传到七牛，然后调用api给指定视频加上水印功能，具体实现//初始化AK，SKstringsACCESS_KEY="七牛账号对应的AK";stringsSECRET_KEY="七牛账号对应的SK";stringnamek... 查看详情

七牛视频切片方案(代码片段)

使用七牛sdk上传视频并做分片操作。step1生成tokenconstqiniu=require("qiniu");varaccessKey=proc.env.QINIU_ACCESS_KEY;varsecretKey=proc.env.QINIU_SECRET_KEY;varmac=newqiniu.auth.digest.Mac(accessKey,secretKey);varbucket=p 查看详情

七牛上传开发（三）使用nodejs生成带数据处理的凭证

参考技术A业务需求，产品希望通过后台接口上传视频后，能立即获取视频切片的地址。然后将地址插入到相关业务的表中。但是七牛的视频处理（切片、转码等）是异步执行，那么如何才能直接获取到经过七牛视频处理后的资... 查看详情

小白必看，集成七牛云sdk实现web端音视频通话(代码片段)

...;还请点赞、收藏哦！👍如果你有一个实现”1v1音视频通话“的场景需求，如果你想入门音视频，不妨来看看这篇文章。本文将介绍如何通过少量的代码集成七牛音视频SDK，实现高质量、低延迟的音视频通话Web... 查看详情

图片视频上传小记

     我们开发中常用到图片上传，比如头像上传之类的，还有类似发布空间说说时发布多张图片等等，我在这里通过借鉴网络资源，并依赖于七牛云存储做了一个图片上传的小结。     我首先... 查看详情

go实战|电商平台图片上传到七牛云(代码片段)

文章目录1.获取配置信息2.config3.upload完整代码这一章节中我们介绍如何把图片上传到七牛云，并且返回对应图片的url。因为后续我们的创建的商品，更换头像等等都是把我们的图片上传七牛云存储，再返回对应的url的... 查看详情

dedecms织梦七牛云存储二次开发

...存空间，因为使用七牛云前端JSSDK上传到七牛云。2、提高网站加载速度，因为大部分的流量由七牛云分发，减少了自身服务器带宽的占用，七牛云的CDN比普通的自建服务器还是要快的。3、不破坏系统兼容性，可以后台配置储存... 查看详情

在上传到远程网站期间缩小/调整视频大小

】在上传到远程网站期间缩小/调整视频大小【英文标题】：Downscaling/resizingavideoduringuploadtoaremotewebsite【发布时间】：2012-04-2721:10:18【问题描述】：我有一个用Rubyonrails编写的Web应用程序，它使用表单将用户的视频上传到服务器（... 查看详情

在 adobe 体验管理器 6.0 中与 youtube 集成，用于在 youtube 中上传视频

...在adobe体验管理器6.0中与youtube集成，用于在youtube中上传视频【英文标题】：Damintegrationwithyoutubeinadobeexperiencemanager6.0foruploadingvideosinyoutube【发布时间】：2015-11-0504:17:06【问题描述】：我尝试将youtube与dam集成。我的用例是将视频从... 查看详情

用户如何将视频上传到我的网站？

】用户如何将视频上传到我的网站？【英文标题】：Howcanuseruploadvideotomywebsite?【发布时间】：2015-10-0703:23:23【问题描述】：我正在开发一个网站，我希望用户上传图片或视频。<formenctype="multipart/form-data"action="upload.php"method="post"... 查看详情

thinkphp6上传图片七牛云如何上传文件到七牛云对象储存cos

...上传文件到七牛云对象储存cos,总所周知图片是特别消耗网站带宽的,个人网站将图片上传至七牛云才能显著提升网站的响应速度,手把手交大家如何上配置ThinkPHP6上传文件至七牛云.然后我们就可以使用$url=Qiniu::upload($filePath,$filename... 查看详情

在php类型网站的后台是如何上传视频文件呢

大的视频文件只能同多ftp工具上传到服务器上，然后后台手动添加地址的。一般服务器的默认配置允许上传的最大文件2M。参考技术A百度找上传文件类然后，看看有没视频类得后缀，没有填上，就哦了！ 参考技术B手动添加地址... 查看详情

vue3+typescript上传文件到七牛云

...久了，但是一直没有完成上传文件的功能，之前看了几次七牛云的文档，折腾了几次，没有成功，今天下了决心必须解决这个问题就又开始了各种找资料，看文档，看示例，终于搞定了。项目中使用的是vite.js构建的，而且用的... 查看详情

jenkins视频教程

http://pan.baidu.com/s/1kUXWxNL01、IT运维传统网站部署的流程.avi02、互联网主流网站部署的流程.avi03、Jenkins持续集成简介.avi05、Jenkins持续集成JOB工程设置.avi06、Jenkins持续集成网站构建实战.avi07、Jenkins持续集成自动化部署一.avi08、Jenkin... 查看详情