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

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.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 发送文件路径。然后您的脚本可以使用它。请注意，如果我向您发送了一个文件名相同但位于两个不同文件夹中的文件，您可能不会将正确的文件放在正确的文件夹中。