jquery - 使用 requirejs 加载 blue-imp fileupload 会在 blobSlice 上引发错误

Question

我正在使用 requirejs 加载文件上传插件

我按如下方式加载插件:

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 () { 

未捕获类型错误:无法设置未定义的属性“blobSlice”。

这是因为 loadImage 作为未定义的参数传递，一旦我们在第 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

Answer 1

正如 @ant_Ti 在对我的问题的评论中提到的那样，我必须在加载 load-image-meta 之前强制 requirejs 加载 load-image ，因此我添加了将以下代码添加到我的 requirejs.config.shim 对象中:

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

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