javascript - angular2 引入 qiniu-js，plupload 模块初始化时报错

Question

我在使用 angular-cli 创建的工程项目中，使用angular2框架，在angular-cli.json 文件内引入七牛上传模块如下：

"scripts": [
"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/plupload/js/plupload.min.js",
"../node_modules/plupload/js/plupload.full.min.js",
"../node_modules/plupload/js/moxie.min.js",
"../node_modules/qiniu-js/dist/qiniu.min.js",
],
在要使用上传功能的 angular 组件中定义如下：

import { Component, OnInit } from '@angular/core';

declare var $:any;
declare var Qiniu:any;
declare var plupload:any;

到此为止页面访问正常，但如果使用并初始化上传组件，就会报错，

初始化功能：

ngOnInit() {

var uploader = Qiniu.uploader({
    runtimes: 'html5,flash,html4',
    browse_button: 'pickfiles',
    container: 'container',
    //drop_element: 'container',
    //max_file_size: '100mb',
    //flash_swf_url: '../js/Moxie.swf',
    //dragdrop: true,
    //chunk_size: '4mb',
    // uptoken_url: $('#uptoken_url').val(),  //当然建议这种通过url的方式获取token
    domain: 'https://XXX.com/'
    
    //init: {
    //    'Key': function(up, file) {
    //        // 若想在前端对每个文件的key进行个性化处理，可以配置该函数
    //        // 该配置必须要在 unique_names: false , save_key: false 时才生效
    //    }
    //}
});

报错情况：

error_handler.js:47 EXCEPTION: Uncaught (in promise): Error: Error in :0:0 caused by: mOxie is not defined

ReferenceError: mOxie is not defined

at QiniuJsSDK.uploader (eval at module.exports (http://localhost:4200/scripts.bundle.js:1:1), <anonymous>:2:5960)

at DownloadComponent.ngOnInit (http://localhost:4200/0.chunk.js:1283:30)

at Wrapper_DownloadComponent.ngDoCheck (/DownloadModule/DownloadComponent/wrapper.ngfactory.js:22:53)

at CompiledTemplate.proxyViewClass.View_DownloadComponent_Host0.detectChangesInternal (/DownloadModule/DownloadComponent/host.ngfactory.js:34:31)

at CompiledTemplate.proxyViewClass.AppView.detectChanges (http://localhost:4200/main.bundle.js:57534:14)

at CompiledTemplate.proxyViewClass.DebugAppView.detectChanges (http://localhost:4200/main.bundle.js:57627:44)

at ViewRef_.detectChanges (http://localhost:4200/main.bundle.js:42066:20)

at RouterOutlet.activate (http://localhost:4200/main.bundle.js:45543:42)

at ActivateRoutes.placeComponentIntoOutlet (http://localhost:4200/main.bundle.js:14710:16)

at ActivateRoutes.activateRoutes (http://localhost:4200/main.bundle.js:14684:22)

请问该如何正确使用此功能模块， 如可以，请附一下在angular2框架下使用七牛上传模块的Demo， 谢谢！

Answer 1

因为plupload js在2.2.0开始，就去掉了mOxie 这个变量；
所以建议使用 plupload js 的版本是在 2.1.1 到 2.1.9

npm已無法安裝低版本

---

所以，2.2.1解決方案如下

const moxie = require('plupload/js/moxie.min.js');
if(!global.mOxie) {
  global.mOxie = {
    Env: moxie.core.utils.Env,
    XMLHttpRequest: moxie.xhr.XMLHttpRequest
  };
};
global.plupload = require('plupload/js/plupload.min.js');
require('qiniu-js/dist/qiniu.js');

這樣程序就可以正常跑起来了