上传目录不会随文件发送文件夹名称

Question

我尝试了目录上传https://stackoverflow.com/a/8218074/2004910的新功能，但我没有在服务器请求中收到确切的文件夹结构。

HTML

<form action="http://localhost:3000/" method="post" enctype="multipart/form-data">
<input id="files" class="file" type="file" name="file[]"  webkitdirectory directory>
<input type="submit" />

请求有效负载（网络面板）

ExpressJS：

const express = require('express')
const app = express()
var busboy = require('connect-busboy');
var fs = require('fs');
//...
app.use(busboy()); 

app.post('/', function (req, res) {
    var fstream;
    req.pipe(req.busboy);
    req.busboy.on('file', function (fieldname, file, filename) {
        console.log("Uploading: " + filename); 
        fstream = fs.createWriteStream(__dirname + '/files/' + filename);
        file.pipe(fstream);
        fstream.on('close', function () {
            res.redirect('back');
        });
    });
})
app.listen(3000, function () {
  console.log('Example app listening on port 3000!')
})

请建议我如何实现这一目标。

Answer 1

来自https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/webkitdirectory

  

用户进行选择后，文件中的每个File对象都有   File.webkitRelativePath属性设置为其中的相对路径   文件所在的选定目录。

我认为它在POST请求中难以通过，我认为你必须在客户端进行操作。

$('#files').on('change',function(e){
    var files = e.target.files;
    for (let i=0; i<files.length; i++) {
        var path = files[i].webkitRelativePath;
        $('#form').append('<input type="hidden" name="filepath[]" value="'+path+'"/>');
    }
});

此脚本将附加隐藏的输入以使用POST发送文件路径。然后您的脚本可以使用它。看起来很难，如果我发送了一个文件名相同的文件，但是在两个不同的文件夹中，你可能不会将正确的文件夹放在正确的文件夹中。