如何映射输入文件数组？

Question

我有两个函数:一个将文件转换为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的数组？

Answer 1

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

FileList不是Array,不是继承Array,但它确实实现了可迭代协议,因此您可以使用扩展语法将其作为数组.

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

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

如果返回一个函数(它确实如此),那么返回的函数是一个生成器函数,它通过扩展语法在类的实例上调用.

Answer 2

虽然帕特里克·罗伯茨的答案是正确的，但您可能会在 TypeScript 上遇到问题：

类型“FileList”不是数组类型或字符串类型。使用编译器选项“--downlevelIteration”允许迭代器进行迭代。TS(2569)

--downlevelIteration您可以找到有关帖子“为什么downlevelIteration默认情况下未打开？”的完整答案。。

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

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