使用requirejs加载blue-imp fileupload会在blobSlice上抛出错误

时间:2014-07-01 22:05:25

标签: jquery file-upload requirejs jquery-file-upload blueimp

我正在使用requirejs

加载fileupload插件

我正在加载插件如下:

define([
        'jquery',
        'jquery.iframe-transport',
        'jquery.fileupload-ui'
    ], function(
        jquery,
        itransport,
        fileupload_ui
    )
    {

此stackoverflow问题确认了这一点:

requireJS with fileupload plugins

当" load-image-meta"在那些行执行:

    loadImage.blobSlice = hasblobSlice && function () { 

enter image description here

未捕获的TypeError:无法设置属性' blobSlice'未定义的。

这是因为loadImage作为参数传递为未定义,一旦我们已经在line 23上定义了依赖性,我就无法找出原因。

有人可以帮助我吗?

附加信息(下)

以下是requirejs.config.paths

中为每个插件定义的路径列表
 'jquery.postmessage-transport': './bower_components/blueimp-file-upload/js/cors/jquery.postmessage-transport',
        'jquery.xdr-transport': './bower_components/blueimp-file-upload/js/cors/jquery.xdr-transport',
        'jquery.ui.widget': './bower_components/blueimp-file-upload/js/vendor/jquery.ui.widget',
        'jquery.fileupload': './bower_components/blueimp-file-upload/js/jquery.fileupload',
        'jquery.fileupload-process': './bower_components/blueimp-file-upload/js/jquery.fileupload-process',
        'jquery.fileupload-validate': './bower_components/blueimp-file-upload/js/jquery.fileupload-validate',
        'jquery.fileupload-image': './bower_components/blueimp-file-upload/js/jquery.fileupload-image',
        'jquery.fileupload-audio': './bower_components/blueimp-file-upload/js/jquery.fileupload-audio',
        'jquery.fileupload-video': './bower_components/blueimp-file-upload/js/jquery.fileupload-video',
        'jquery.fileupload-ui': './bower_components/blueimp-file-upload/js/jquery.fileupload-ui',
        'jquery.fileupload-jquery-ui': './bower_components/blueimp-file-upload/js/jquery.fileupload-jquery-ui',
        'jquery.fileupload-angular': './bower_components/blueimp-file-upload/js/jquery.fileupload-angular',
        'jquery.iframe-transport': './bower_components/blueimp-file-upload/js/jquery.iframe-transport',
 'blueimp-canvas-to-blob': './bower_components/blueimp-canvas-to-blob/js/canvas-to-blob',
        'canvas-to-blob': './bower_components/blueimp-canvas-to-blob/js/canvas-to-blob',
        'load-image': './bower_components/blueimp-load-image/js/load-image',
        'load-image-ios': './bower_components/blueimp-load-image/js/load-image-ios',
        'load-image-orientation': './bower_components/blueimp-load-image/js/load-image-orientation',
        'load-image-meta': './bower_components/blueimp-load-image/js/load-image-meta',
        'load-image-exif': './bower_components/blueimp-load-image/js/load-image-exif',
        'load-image-exif-map': './bower_components/blueimp-load-image/js/load-image-exif-map',
        'tmpl': './bower_components/blueimp-tmpl/js/tmpl'

这是每个文件的依赖项列表

jquery.postmessage-transport
---'jquery'

jquery.xdr-transport
---'jquery'


jquery.ui.widget.js
---'jquery'


jquery.fileupload.js
---'jquery',
---'jquery.ui.widget'


jquery.fileupload-process.js
---'jquery',
---'./jquery.fileupload' ***


jquery.fileupload-validate
---'jquery',
----'./jquery.fileupload-process' ***


jquery.fileupload-image
    'jquery',
    'load-image',
    'load-image-meta',
    'load-image-exif',
    'load-image-ios',
    'canvas-to-blob',
    './jquery.fileupload-process' ****

jquery.fileupload-audio
    'jquery',
    'load-image',
    './jquery.fileupload-process'



jquery.fileupload-video.js
    'jquery',
    'load-image',
    './jquery.fileupload-process'


jquery.fileupload-ui
    'jquery',
    'tmpl',
    './jquery.fileupload-image',
    './jquery.fileupload-audio',
    './jquery.fileupload-video',
    './jquery.fileupload-validate'


jquery.fileupload-jquery-ui
    'jquery',
    './jquery.fileupload-ui'


jquery.fileupload-angular
     'jquery',
    'angular',
    './jquery.fileupload-image',
    './jquery.fileupload-audio',
    './jquery.fileupload-video',
    './jquery.fileupload-validate'


jquery.iframe-transport
    'jquery'


blueimp-canvas-to-blob
// duplicated with key "canvas-to-blob" to match jquery.fileupload-image dependency key

load-image
    NO DEPS

load-image-ios
    'load-image'

load-image-orientation
    'load-image'

load-image-meta
    'load-image'

load-image-exif
    'load-image'
    'load-image-meta'

load-image-exif-map
    'load-image',
    'load-image-exif'

tmpl
   NO DEPENDENCIES

1 个答案:

答案 0 :(得分:1)

正如@ant_Ti所提及的那样,对我的问题发表评论我必须强制requirejs在加载load-image之前加载load-image-meta因为这个原因我将以下代码添加到我的requirejs中。 config.shim对象:

require.config({
    shim: {
        'jquery.fileupload-ui': {
            deps: ['load-image']
        }
    }
});

这可确保在我们尝试加载jquery.fileupload-ui时,load-image已经可用。