如何读取html5中拖放的文件夹的文件内容

Question

堆栈溢出和互联网上有很多关于此错误的问题，但是，大多数问题被询问和回答的上下文与我的不符。我正在用电子制作一个画廊应用程序。这个想法是让某人将文件夹拖到应用程序中的拖放区中，然后应用程序打开该文件夹，遍历文件夹中的每个项目，如果找到文件夹，则仅显示该文件夹的名称（如果是图像） ，读取图像并将其显示给用户。 （注意，我没有明确检查文件类型为图像。我正在拖动一个文件夹，我确定其内容是图像或文件夹......稍后我将添加类型检查）。这是我的代码。

"use strict"
const filedrop = document.getElementById('drop-zone')
const importMyDrop = function (e) {
  e.stopPropagation()
  e.preventDefault()
  const files = e.dataTransfer.items
  if (files.length > 0) {
      for (let i = 0; i < files.length; i++) {
          let entry = e.dataTransfer.items[i].webkitGetAsEntry()
          if (entry.isFile) {
              console.log("file")
          } else if (entry.isDirectory) {
              onInitFs(entry)
          }
      }

    }
  }
 const importDragOver = function (e) {
   e.preventDefault()
   e.dataTransfer.effectAllowed = 'copy'
   e.dataTransfer.dropEffect = 'copy'
   return false
  }

  function toArray(list) {
   return Array.prototype.slice.call(list || [], 0)
}

  function listResults(entries) {
    let list = document.getElementById('list')

    entries.forEach(function (entry) {
       if (entry.isDirectory) {
         list.innerHTML += `<li>${entry.name}</li>`
       }
       else if (entry.isFile) {
           let reader = new FileReader()
           reader.onloadend = function (e) {
              list.innerHTML += "<p><strong>" + entry.name + ":</strong><br />" +
                '<img src="' + e.target.result + '" /></p>'
        }
        reader.readAsDataURL(entry)//Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'.
    }
})
 }
  function onInitFs(fs) {
    let dirReader = fs.createReader()
    let entries = []

   // Call the reader.readEntries() until no more results are returned.
    let readEntries = function () {
    dirReader.readEntries(function (results) {
        if (!results.length) {
            listResults(entries.sort())
        } else {
            entries = entries.concat(toArray(results))
            readEntries()
        }
    })
}

readEntries() // Start reading dirs.

}

 filedrop.addEventListener('drop', importMyDrop)
 filedrop.addEventListener('dragover', importDragOver)

错误显示在下一行的注释中

reader.readAsDataURL(entry)//Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'.

我正在关注这篇文章，以及sitepoint的示例。第一个链接中的说明直至迭代文件夹的每个内容，我已经成功完成了这一点。第二个链接显示了如何在拖放图像时显示图像。唯一的问题是，在我的应用程序中，用户不会删除图像，而是删除文件夹并迭代其内容。 我该如何解决这个错误？

Answer 1

您必须使用方法file

entry.file(function(file){
    ...
    reader.readAsDataURL(file)
})