处理多个上传的文件'同步地'

Handling multiple uploaded files 'synchroneously'

本文关键字：同步 文件 处理      更新时间：2023-09-26

我正在为Meteor应用程序（Meteor 1.2.1）中使用的所见即所得编辑器编写上传插件。我使用Slingshot将文件上传到Amazon S3。一旦上传文件，我的插件就会在编辑器中插入一个指向上传文件的链接。到目前为止没有什么新奇的东西。

对于单个文件上传来说，这不是问题。在多个文件上传的情况下，事情会变得更加困难。我想要的是，在上传完所有文件后，我会得到一个文件名和URLS的数组，并插入一个包含所有链接的漂亮的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，但它相当强大。在流星的背景下理解它变得越来越困难。Promise的东西看起来很有希望，但我不知道该使用哪个包。

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

感谢，

Cspr

异步库有一个名为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方法并行运行任务。

有没有什么可以阻止您迭代输入文件，异步上传它们，并询问我们是否已经完成了每个回调？

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!');
}
相关文章：