javascript - 上传文件夹(使用 FileSystem API)

Question

我正在尝试使用 FileSystem API 上传文件夹。

dropzone.ondrop = function(e) {
                e.preventDefault();
                let items=e.dataTransfer.items;
                let formdata=new FormData();
                function scanFiles(item){
                    console.log("In scanFiles")
                    if (item.isFile) {
                        console.log("Typecasting...");

                        item.file(function(file) {
                            console.log(file);
                            formdata.append('directory',file);
                        });
                    }
                    else if (item.isDirectory) {
                        console.log("Directory...")
                        let directoryReader = item.createReader();
                        directoryReader.readEntries(function(entries) {
                            entries.forEach(function(entry) {
                                scanFiles(entry);
                            });
                        });
                    }
                }
                for (let i=0; i<items.length; i++) {
                    let item = items[i].webkitGetAsEntry();
                    console.log(item);
                    if (item) {
                        console.log("Calling scan");
                        scanFiles(item);
                        console.log("Ending scan");
                    }
                }

                var xhr=new XMLHttpRequest();
                xhr.open('post','uploadFolder/');
                xhr.send(formdata);
            }

基本上，代码所做的是获取一个放置的文件夹，读取其内容，如果它是一个文件，则将其作为文件输入附加到表单，并将其发送到所需的 url 以进行进一步处理。好的，所以问题是当我运行它时，控制台输出是

FileSystemFileEntry { isFile: true, isDirectory: false, name: "Test.o", fullPath: "/Test.o", filesystem: FileSystem }  
Calling scan  
In scanFiles  
Typecasting...  
Ending scan  
File { name: "Test.o", lastModified: 1506856693000, lastModifiedDate: Date 2017-10-01T11:18:13.000Z, webkitRelativePath: "", size: 6240, type: "" }

文件对象是在脚本中的所有行都已执行后创建的，因此向 url 发送了不正确的请求。

我猜这是由于 file() 函数的闭包性质。有人可以告诉我如何以正确的方式获取文件输入吗？

Answer 1

.file() 函数是异步的。您可以使用 Promise 构造函数和 Promise.all() 来等待对 .file() 的所有调用，另请参阅 How to upload and list directories at firefox and chrome/chromium using change and drop events

HTML

<input type="file" webkitdirectory>

JavaScript

var dropzone = document.querySelector("input[type=file]");

dropzone.ondrop = function(e) {
  e.preventDefault();
  let items = e.dataTransfer.items;
  let formdata = new FormData();

  function scanFiles(item, index) {
    return new Promise(function(resolve) {
      if (item.isFile) {
        console.log("Typecasting...", item);

        item.file(function(file) {
          console.log(file, "here");
          formdata.append('file-' + index, file);
          resolve();
        });
      } else if (item.isDirectory) {
        console.log("Directory...")
        let directoryReader = item.createReader();

        directoryReader.readEntries(function(entries) {
          Promise.all(entries.map(scanFiles)).then(resolve);
        });
      }
    })
  }

  var p = Promise.all(Array.from(items, item => scanFiles(item.webkitGetAsEntry())));
  p.then(function() {
    // do stuff with `formdata` here
    for (let prop of formdata) {
      console.log(prop[0], prop[1])
    }
    /*
      var xhr=new XMLHttpRequest();
      formdata.append('address','');
      xhr.open('post','uploadFolder/');
      xhr.send(formdata);
    */
  })

}

jsfiddle https://jsfiddle.net/t03bvbzu/