javascript - 如何使以下 readAsDataURL 返回多个 readAsDataURL？

Question

此函数读取从输入字段获取的文件并返回它们的 dataUrls:

readAsDataURL (target) {
  // target => <input type="file" id="file">
  var reader = new FileReader()
  return new Promise(function (resolve, reject) {
    reader.onload = function (event) {
      resolve(event.target.result)
    }
    reader.readAsDataURL(target.files[0])
  })
},

如您所见，该函数仅处理单个文件。我想返回多个文件。我尝试执行 reader.readAsDataURL(target.files) 但出现此错误:'FileReader' 上的'readAsDataURL':参数 1 不是 'Blob' 类型。

如何让函数返回多个dataUrls？

Answer 1

您是否尝试过使用 Promise.all ？您也许可以执行以下操作:

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

readAsDataURL (target) {
  // target => <input type="file" id="file">
  var filesArray = Array.prototype.slice.call(target.files)      
  return Promise.all(filesArray.map(fileToDataURL))
}

这基本上与您设置的相同，但为每个创建一个 promise ，仅在所有完成后才将结果返回到数组中。

---

我忘了你不能把target.files直接当作一个数组，所以需要先转换一下。为此，您可以使用:Array.prototype.slice.call(target.files)