上传文件夹（使用FileSystem API） [英] uploading folders (using FileSystem API)

问题描述

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

I'm trying to upload folders using the 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进行进一步处理。
好​​的，所以问题是当我运行它时，控制台输出是

Basically, what the code does is take a dropped folder, read its contents and if its a file, attaches it as a file input to a form, and send it to the required url for further processing. Okay, so the problem is when I run it, the console output is

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发送了错误的请求。

The file object is created after all lines in the script have been executed and so an incorrect request is sent to the url.

我想这是由于file（）函数的关闭特性所致。有人可以告诉我如何以正确的方式获取文件输入吗？

I guess this is due to the closure nature of the file() function. Can someone please tell me how I can get the file input in the proper manner?

推荐答案

.file （）函数是异步的。您可以使用 Promise 构造函数和 Promise.all（）来等待对 .file的所有调用（），另请参见如何使用更改和删除事件在firefox和chrome / chromium上上传和列出目录

.file() function is asynchronous. You can use Promise constructor and Promise.all() to await all calls to .file(), see also How to upload and list directories at firefox and chrome/chromium using change and drop events

HTML

<input type="file" webkitdirectory>

JavaScript

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/

jsfiddle https://jsfiddle.net/t03bvbzu/

这篇关于上传文件夹（使用FileSystem API）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！