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

Posted 2020-09-03 学习笔记666

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>