Javascript 如何使以下readAsDataURL返回多个readAsDataURL？

此函数用于读取从输入字段获取的文件并返回其数据URL：

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])
  })
},

readAsDataURL（目标）{
//目标=>
var reader=new FileReader（）
返回新承诺（功能（解决、拒绝）{
reader.onload=函数（事件）{
解析（event.target.result）
}
reader.readAsDataURL（target.files[0]）
})
},

如您所见，该函数只处理单个文件。我想返回多个文件。我尝试执行

reader.readAsDataURL（target.files）

但出现以下错误：

文件读取器上的'readAsDataURL'：参数1不是'Blob'类型。

如何使函数返回多个数据URL？

您是否尝试过使用？您可能可以执行以下操作：

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))
}

fileToDataURL（文件）{
var reader=new FileReader（）
返回新承诺（功能（解决、拒绝）{
reader.onload=函数（事件）{
解析（event.target.result）
}
reader.readAsDataURL（文件）
})
}  
readAsDataURL（目标）{
//目标=>
var filesArray=Array.prototype.slice.call（target.files）
返回Promise.all（filesArray.map（fileToDataURL））
}

这与您设置的操作基本相同，但为每个操作创建了一个承诺，仅在所有操作完成后才返回数组中的结果

---

---

我忘记了不能将

target.files

直接视为数组，因此需要先对其进行转换。为此，您可以使用：

Array.prototype.slice.call（target.files）

这个问题并不清楚您将如何处理这些数据URI，但大多数情况下，您实际上并不需要它

为了能够将用户文件或Blob中的媒体显示到文档中，最好使用返回blobURI的方法，该方法可以像任何url一样使用

blobURIs优势的非详尽列表：

• 是同步的。您不需要承诺包装事件处理程序，所有这些都可以在单个循环中完成
• 速度快。浏览器不会读取传递的文件或Blob，它只是在内存中创建一个符号链接，指向硬盘中的真实文件
• 内存重量轻。因为上一点。与

  readAsDataURL（）

  相比，您应该注意，后者将首先完全读取文件，将其转换为base64字符串（比原始数据大约34%），最后将此大字符串存储在DOM的标记中，使其始终存在于内存中。从那时起，浏览器将再次读取它，将其转换为二进制，再将其作为二进制读取，最后将其作为普通资源进行处理。

  ---

“但我需要将其发送到服务器！” 然后直接将文件作为多部分数据发送。前端的工作量更少，管道中的工作量更少（记住~34%），如果您想在服务器端保存文件，那么服务器端的工作量也更少。 大多数服务器端语言都有简单的内置方法来捕获POST请求中的文件，并且您可以使用

---

下面是一个使用blobURIs的代码示例，它认为所有文件都是图像

document.querySelector（'input'）。onchange=function（）{
//FileList还没有forEach方法
Array.prototype.forEach.call（this.files，function（file））{
if（file.type.indexOf（'image/'==0））{
var i=新图像（）；
i、 src=URL.createObjectURL（文件）；//创建一个blobURI
文件.正文.附件（一）；
}
});
};
使用
Promise.all
，但在
FileList
对象上没有
map
方法。kaido是正确的：
TypeError:target.files.map不是一个函数
那么正确的方法是什么？是否更新了我的答案，包括将文件转换为正确的array@MattWay谢谢它的工作原理也是这样的：
返回Promise.all（[…target.files].map（utils.fileToDataURL））
（出于一些不可思议的原因）。你是对的。spread操作符基本上执行与我使用的切片调用相同的操作。我会使用你的方法（只是忘记了）。请注意，如果你试图通过
或
将多个媒体文件显示到文档中，那么甚至不要使用
文件阅读器
方式：
URL.createObjectURL（）
是同步的，不需要时间和内存，而且应该始终优先于重型车辆dataURIs@Kaiido哦，我不知道这件事。你能用一个示例代码写一个答案吗？我爱你：*！！