Question

我想创建自己的拖放组件，我使用它： Does HTML5 allow drag-drop upload of folders or a folder tree? 一切正常，但我想知道文件遍历何时结束，因为我想创建一个字符串数组，其中包含文件名然后做某事。 traverseFileTree函数包含回调，因此存在异步任务。我需要等到回调完成，我不知道该怎么做。我会使用jQuery.Deffered，但是traverseFileTree是从循环中调用的，并且-in add-这是一个递归函数。

this.dndElement.addEventListener('drop', (ev: any) => {
  var items = ev.dataTransfer.items;
  for (var i = 0; i < items.length; i++) {
     this.traverseFileTree(items[i].webkitGetAsEntry());
  }

  // i want to wait until callbacks in the traverseFileTree are done and do sth with fileNames array 
});


public traverseFileTree(item, path?) {
        path = path || "";

        if (item.isFile) {
            item.file((file) => {
                this.fileNames.push(file.name);
            });
        } else if (item.isDirectory) {
            var dirReader = item.createReader();
            dirReader.readEntries((entries) => {
                for (var j = 0; j < entries.length; ++j) {
                    this.traverseFileTree(entries[j], path + item.name + "/");
                }
            });
        }
    }

更新

我确实是这样的：

this.dndElement.addEventListener('drop', (ev: any) => {
            var items = ev.dataTransfer.items;

            for (var i = 0; i < items.length; i++) {
                var item = items[i].webkitGetAsEntry();
                if (item) {
                    this.traverseFileTree(item);
                }
            }

            Promise.all(this.promises).then(() => { console.log(this.fileNames); });

        });


public traverseFileTree(item, path?) {
        path = path || "";
        console.log(item);
        if (item.isFile) {
            this.fileNames.push(item.fullPath);
        } else if (item.isDirectory) {
            this.promises.push(new Promise((resolve, rejected) => {
                var dirReader = item.createReader();
                dirReader.readEntries((entries) => {
                    for (var j = 0; j < entries.length; ++j) {
                        this.traverseFileTree(entries[j], path + item.name + "/");
                    }
                    resolve();        
                })
            }));
        }
    }

现在我得到文件列表......但仅限于“第一级”。

Adir
   Bdir
     1File
     2File
     Cdir
       3File
       4File
   5File
   6File

我得到1File，2File，5File，6File但是3File，4File没有。为什么呢？

Answer 1

你在这里开始：

this.traverseFileTree(items[i].webkitGetAsEntry());

然后函数public traverseFileTree(item, path?) {接管。该函数是 sync （即使它是递归的）。一旦它返回，你应该已经处于良好的状态

但请注意，这只是webkit：https://developer.mozilla.org/en/docs/Web/API/DirectoryReader#readEntries，很可能会在某些时候删除。

如何找出文件遍历何时结束？

1 个答案: