2

我正在为我在 Meteor 应用程序（Meteor 1.2.1）中使用的 WYSIWYG 编辑器编写上传插件。我使用Slingshot将文件上传到 Amazon S3。上传文件后，我的插件会在编辑器中插入指向上传文件的链接。到目前为止没有什么花哨的。

对于单文件上传，这不是问题。在多文件上传的情况下，事情变得更加困难。我想要的是，在上传所有文件之后，我将得到一组文件名和 URL，并插入一个包含所有链接的漂亮 HTML 列表（我不关心精确的文件/链接顺序）。

Slingshot 使用异步函数上传文件：

uploader.send(document.getElementById('input').files[0], function (error, downloadUrl) {
  if (error) {
    // Log service detailed response.
    console.error('Error uploading', uploader.xhr.response);
    alert (error);
  } else {
    Meteor.users.update(Meteor.userId(), {$push: {"profile.files": downloadUrl}});
  }
});

在回调中返回上传文件的 URL。为了从 5 个上传的文件中收集例如 5 个 url，我认为我需要 Slingshot 的异步“发送”功能来表现得像一个同步功能。

我希望我正确理解 Meteor.wrapAsync 不起作用，因为一切都在客户端完成。我查看了 javascript Promise，但它相当压倒性。而且在 Meteor 的上下文中更难理解它。Promise 的东西看起来很有希望，但我不明白要使用哪个包。

有人可以解释如何处理（客户端）连续运行多个（相同的）异步函数调用，收集结果并在所有上传完成后使用它们吗？

欣赏它，

硅橡胶

4

2 回答 2

2

异步库有一个名为的方法，mapSeries允许您执行此操作。它允许您使用（可能）异步函数迭代数组，并在最终异步任务完成时返回所有结果的数组：

var files = [file1, file2, file3];

function iterator(file, callback) {
  uploader.send(file, function(err, downloadUrl) {
    if (err) callback(err);
    else callback(null, downloadUrl);
  });
}

function done(err, results) {
  // results is an array of URLs
}

async.mapSeries(files, iterator, done);

如果您不关心处理请求的顺序，您可以使用常规async.map方法并行运行任务。

于 2015-11-12T23:33:28.630 回答
1

有什么东西阻止你遍历输入文件，异步上传它们并询问我们是否已经完成了每个回调？

var inputs = document.getElementsByTagName('input');
var urls = [];

for (var i = 0; i < inputs.length; i++) {

  if (inputs[i].files == null) { continue; }

  uploader.send(inputs[i].files[0], function (error, downloadUrl) {

    if (error) {

      console.error('Error uploading', uploader.xhr.response);

    } else {

      urls.push(downloadUrl);

      if (urls.length > inputs.length - 1)
        allFilesUploaded();
    }
  });
}

function allFilesUploaded () {

  Meteor.users.update(Meteor.userId(), {$push: {"profile.files": urls}});
  console.log('All done!');

}
于 2015-11-12T23:22:02.663 回答