我在使用 angular-cli 創(chuàng)建的工程項目中,使用angular2框架,在angular-cli.json 文件內(nèi)引入七牛上傳模塊如下:
"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進行個性化處理,可以配置該函數(shù)
// // 該配置必須要在 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, 謝謝!
業(yè)精于勤,荒于嬉;行成于思,毀于隨。
因為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');
這樣程序就可以正常跑起來了