过早调用墨迹文件选择器回调。如何检测文件何时可用？答案

【问题标题】：Ink file picker callback called too early. How to detect when the file is available?过早调用墨迹文件选择器回调。如何检测文件何时可用？
【发布时间】：2013-08-07 21:29:24
【问题描述】：

使用 filepicker.io 上传文件时，会在文件实际可用之前调用 filepicker.pick 成功回调。代码如下：

        filepicker.pick({
            mimetypes: ['image/*'],
            container: 'modal',
            services:['COMPUTER', 'FACEBOOK', 'INSTAGRAM', 'WEBCAM']
        },
        function(inkBlob){
            $('img.foo').attr('src', inkBlob.url);
        },
        function(FPError){
            console.log(FPError.toString());
        });

我在回调中的 inkBlob 中得到一个 url，但有时如果我将该 url 插入 dom（如上），我会得到 404。其他时候它可以工作。我正在寻找一种可靠的方法来了解何时可以使用 filepicker 返回的文件。我认为是成功回调，但似乎存在这种竞争条件。

我意识到我可以将成功回调包装在 setTimeout 中，但这看起来很混乱，如果文件实际可用，我不想让用户等待。

【问题讨论】：

标签： filepicker.io

【解决方案1】：

您还可以使用事件侦听器。

我有一个 ajax 调用，它在图像被 Ink 裁剪后下载图像。这个电话偶尔会失败。我通过大致执行以下操作来修复它：

filepicker.convert(myBlob, 
    { 
        crop: cropDimensions
    },
    function(croppedBlob) {

        function downloadImage() { 
            ...
        }

        var imageObj = new Image();
        imageObj.onLoad(downloadImage()); //only download when image is there
        imageObj.src = croppedBlob.url;
    }
);

【讨论】：

【解决方案2】：

我和你有同样的问题。我的解决方法是将 onError 事件附加到图像并让它在 404 上重试（可以设置重试限制以避免无限循环），但它非常丑陋和混乱，所以如果有人能提供更好的解决方案。

【讨论】：

这是一个很好的技巧！我还给 Ink 的人发了邮件，他们认为这是一个错误，所以我希望他们很快就会修复它......