vue.js+七牛云上传视频，一直报Qiniu.uploader is not a constructor

Question

vue项目做一个上传视频到七牛云的功能，
看了2天七牛的文档，按照操作配置，引入 却一直报错

[Vue warn]: Error in mounted hook: "TypeError: Qiniu.uploader is not a constructor"

用的是七牛云 JavaScript SDK

下面是代码：
安装七牛云

npm install qiniu-js

在需要的组件引入

<template>
    <div>
        <x-button type="primary" action-type="button" id="selectVideo">开始录制视频</x-button> 
    </div>
</template>

//var Qiniu = require('qiniu-js')
//报错  [Vue warn]: Error in mounted hook: "TypeError: Qiniu.uploader is not a constructor"
//
import Qiniu from 'qiniu-js'
//这样引入的话  报错[Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'uploader' of undefined"

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

        uptoken_url: 'http://192.168.1.5/test_qiniu/php-sdk/index.php',         // Ajax请求uptoken的Url，强烈建议设置（服务端提供）

        get_new_uptoken: false,             // 设置上传文件的时候是否每次都重新获取新的uptoken
        // downtoken_url: '/downtoken',
        // Ajax请求downToken的Url，私有空间时使用，JS-SDK将向该地址POST文件的key和domain，服务端返回的JSON必须包含url字段，url值为该文件的下载地址
        // unique_names: true,              // 默认false，key为文件名。若开启该选项，JS-SDK会为每个文件自动生成key（文件名）
        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: '4mb',                  // 分块上传时，每块的体积
        auto_start: true,                   // 选择文件后自动上传，若关闭需要自己绑定事件触发上传
        //x_vars : {
        //    查看自定义变量
        //    'time' : function(up,file) {
        //        var time = (new Date()).getTime();
        // do something with 'time'
        //        return time;
        //    },
        //    'size' : function(up,file) {
        //        var size = file.size;
        // do something with 'size'
        //        return size;
        //    }
        //},


        init: {
            'FilesAdded': function(up, files) {
                plupload.each(files, function(file) {
                    // 文件添加进队列后，处理相关的事情
                });
            },
            'BeforeUpload': function(up, file) {
                // 每个文件上传前，处理相关的事情
            },
            'UploadProgress': function(up, file) {
                // 每个文件上传时，处理相关的事情
            },
            '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() {
                //队列文件处理完毕后，处理相关的事情
            },
            'Key': function(up, file) {
                // 若想在前端对每个文件的key进行个性化处理，可以配置该函数
                // 该配置必须要在unique_names: false，save_key: false时才生效
                var key = "";
                // do something with key here
                return key
            }
        }
    });
},

这里应该怎么解决？

Answer 1

没人回答，自己调试解决
要注意，js-sdk有两个版本，npm 引入的，代码写法如下：

<template>
  <!-- upload -->
  <div style="margin:0 20px;">
        <a href="javascript:;" class="a-upload">
            <input type="file" class="videoBtn" id="selectVideo" @change="qiniuUpload"  accept="video/*" capture="user">
            开始录制视频
        </a>
    </div>
</template>

methods:{
//七牛上传
    qiniuUpload(event){
        var _this = this;
        var file = event.target.files[0];
        const tokenUrl = 'http://192.168.1.5/test_qiniu/php-sdk/index.php';
        this.$axios({
            method: 'post',
            url:tokenUrl,
        }).then((res)=>{
            this.qiniu_token = res.data.uptoken;
            const formdata = new FormData()
            formdata.append('file', file)
            formdata.append('token', this.qiniu_token)
            this.$axios({
                method: 'post',
                url:'http://upload-z2.qiniup.com/',         // 七牛云的上传地址，根据自己所在地区选择，我这里是华南区
                headers: {
                    'Content-Type': 'multipart/form-data'
                },
                data:formdata
            }).then((res)=>{
                console.log(res.data)
            })
        })
    },

}

主要注意两点 ，首先通过axios接收express提供的token，
然后，把token，file发送post到七牛，得到响应发送成功并返回个路径

Answer 2

楼主，怎么结合plupload使用？Qiniu.uploader这个是用不了了吗？