Question

到目前为止，我在Meteor项目中加载filepicker包时运气不佳。

我做了什么：

$cd ~/myMeteorProject
$mrt add filepicker
>>>Done installing smart packages
$head smart.json
>>>{
  "packages": {
  "router": {},
  "filepicker": {}
 }
}
$mrt
>>>Stand back while Meteorite does its thing

Done installing smart packages

Ok, everything's ready. Here comes Meteor!

[[[[[ ~/myMeteorProject ]]]]]

=> Meteor server running on: http://localhost:3000/

所以在这一点上所有看起来都像我期待的那样。（我甚至仔细检查了filepicker包的内容，它包含了我所期望的所有内容，加载的源代码与在filepicker.io网站上找到的URL相同。）

但是，当我尝试运行以下命令（从coffeescript编译）时：

if (Meteor.isClient) {
   Meteor.startup(function() {
   return filepicker.setKey('A9FiXXdu5RB^GYujfDPwlz'); //not my actual key, don't worry
 });}

我得到：未捕获的ReferenceError：未定义filepicker

所以，这有点令人失望。有任何想法吗？我已经尝试删除并重新添加coffeescript和filepicker。是否有一些加载顺序问题？我注意到如果脚本加载失败，filepicker-load.js会发出警报，我没看到......

Answer 1

我遇到了完全相同的问题，对我而言，它既不是setTimeout()也不是setInterval()。

Ink本身在docs中提供了一个非常好的非阻塞脚本，它将所有filepicker调用排队，直到它完全加载，然后按照它们被调用的顺序执行它们。这是它的工作原理：

mrt remove filepicker（如果已添加）
mrt remove loadpicker（如果已添加）
创建新文件/lib/filepicker.js

<强> /lib/filepicker.js

if (Meteor.isClient) {
    (function(a) {
        if (window.filepicker) {
            return
        }
        var b = a.createElement("script");
        b.type = "text/javascript";
        b.async = !0;
        b.src = ("https:" === a.location.protocol ? "https:" : "http:") + "//api.filepicker.io/v1/filepicker.js";
        var c = a.getElementsByTagName("script")[0];
        c.parentNode.insertBefore(b, c);
        var d = {};
        d._queue = [];
        var e = "pick,pickMultiple,pickAndStore,read,write,writeUrl,export,convert,store,storeUrl,remove,stat,setKey,constructWidget,makeDropPane".split(",");
        var f = function(a, b) {
            return function() {
                b.push([a, arguments])
            }
        };
        for (var g = 0; g < e.length; g++) {
            d[e[g]] = f(e[g], d._queue)
        }
        window.filepicker = d
    })(document);
    filepicker.setKey(YOUR_FILEPICKER_KEY);
}

此客户端代码是取自https://developers.inkfilepicker.com/docs/web/的非阻塞加载程序的vanilla版本。使用此功能，您可以设置一次密钥，然后根据需要使用filepicker，而不必担心它是否已经加载。

当然你也可以用这个修改loadpicker，只需在你的loadpicker.js中粘贴这段代码

<强> loadpicker.js

loadPicker = function(key) {
    (function(a) {
        if (window.filepicker) {
            return
        }
        var b = a.createElement("script");
        b.type = "text/javascript";
        b.async = !0;
        b.src = ("https:" === a.location.protocol ? "https:" : "http:") + "//api.filepicker.io/v1/filepicker.js";
        var c = a.getElementsByTagName("script")[0];
        c.parentNode.insertBefore(b, c);
        var d = {};
        d._queue = [];
        var e = "pick,pickMultiple,pickAndStore,read,write,writeUrl,export,convert,store,storeUrl,remove,stat,setKey,constructWidget,makeDropPane".split(",");
        var f = function(a, b) {
            return function() {
                b.push([a, arguments])
            }
        };
        for (var g = 0; g < e.length; g++) {
            d[e[g]] = f(e[g], d._queue)
        }
        window.filepicker = d
    })(document);
    filepicker.setKey(key)
};

希望这适合你！

Answer 2

你的语法看起来很好，并且与我在我的应用程序中使用的内容相匹配 - 我认为因为filepicker通过注入脚本元素加载脚本，所以你有一个计时问题（在加载脚本之前调用setKey）

可能会暂停设置密钥，直到用户执行某些操作，例如

filepicker.setKey("KEY");
filepicker.pickAndStore({...},function(error){...});

或设置超时

Meteor.setTimeout(function(){
  filepicker.setKey("KEY");
},1000);

您还可以使用间隔来检查是否需要（更能容忍长时间加载） - 您可以调整此值以在一定时间后放弃

var filepickerInterval = Meteor.setInterval(function(){
   if(filepicker){
     Meteor.clearInterval(filepickerInterval);
     filepicker.setKey("KEY");
   }
}, 100);

Answer 3

您还可以使用异步javascript片段自动排队对filepicker对象的调用，直到脚本加载为止。见https://developers.inkfilepicker.com/docs/web/#javascript

在meteor中加载filepicker脚本的麻烦

3 个答案: