如何映射输入文件数组？

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

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 的数组？

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

FileList https://developer.mozilla.org/en-US/docs/Web/API/FileList不是一个Array，并且不继承自Array，但它确实实现了可迭代协议 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols，所以你可以使用扩展语法 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax将其作为数组获取。

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

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

如果返回一个函数（确实如此），那么返回的函数是生成器函数 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Generator通过扩展语法在类的实例上调用它。