如何映射输入文件数组？答案

【问题标题】：How to map through an array of input files?如何映射输入文件数组？
【发布时间】：2017-06-13 03:34:15
【问题描述】：

我有两个函数：一个将文件转换为 dataUrl，另一个返回一个带有结果的 promise：

fileToDataURL(file) {
  var reader = new FileReader()
  return new Promise(function (resolve, reject) {
    reader.onload = function (event) {
      resolve(event.target.result)
    }
    reader.readAsDataURL(file)
  })
}  

getDataURLs (target) {
  // target => <input type="file" id="file">      
  return Promise.all(target.files.map(fileToDataURL))
}

target.files.map 返回：TypeError: target.files.map is not a function。 H

如何修改getDataUrls，让它返回一个带有dataUrls的数组？

【问题讨论】：

标签： javascript file

【解决方案1】：

function getDataURLs(target) {
  // target => <input type="file" id="file">      
  return Promise.all([...target.files].map(fileToDataURL))
}

FileList 不是Array，也不是从Array 继承，但它确实实现了the iterable protocol，因此您可以使用spread syntax 将其作为数组获取。

如果您想知道如何检查像 FileList 这样的类是否支持扩展语法，您可以这样做：

console.log(FileList.prototype[Symbol.iterator]);

如果它返回一个函数（它确实如此），那么返回的函数是一个 generator function，它通过扩展语法在类的实例上调用。

【讨论】：

非常感谢！我写 JavaScript 已经四年了，感觉你说的是中文。
嗯，我已经提供了一些可能不清楚的东西的链接。希望关注他们可以澄清我所涵盖的所有内容。
为什么在你的例子中使用Promise.all？为什么不只使用 [...target.files].map ？使用 Promise 比数组有什么好处吗？
@MohamedAbdallah Promise.all() 接受一个可迭代的 Promise 并返回一个解析为数组的 Promise。阅读问题，Promise.all() 也在那里使用，不仅仅是我的回答。仅供参考Promise.all() 对谷歌来说非常微不足道。
我的问题不是Promise.all() 是什么，而是这种情况比普通数组有什么好处。顺便说一句，谢谢你，你的回答拯救了我的一天。

【解决方案2】：

虽然 Patrick Roberts 的回答是正确的，但您可能会在 TypeScript 上遇到问题：

Type 'FileList' 不是数组类型或字符串类型。使用编译器选项“--downlevelIteration”来允许迭代器的迭代。 ts(2569)

你可以找到关于--downlevelIterationhere的完整答案。

在我们的例子中，为了能够迭代 FileList，而不是扩展运算符，请使用 Array.from()：

function getDataURLs(target) {
  // target => <input type="file" id="file">      
  return Promise.all(Array.from(target.files).map(fileToDataURL))
}

【讨论】：

代码中有一个错字 - 它有一个额外的 ] 字符。应该是：return Promise.all(Array.from(target.files).map(fileToDataURL))