POST 请求中的空 FormData

Question

我正在制作一个简单的应用程序，它将上传文件到服务器，该文件已被拖放到 canvas。

下面是拖放代码的一小部分示例：

var files = event.dataTransfer.files;
var formData = new FormData();
formData.append('files', files);

使用调试工具，我知道 files 的定义是正确的。

那么，我提出要求：

var xhr = new XMLHttpRequest();
xhr.open('POST', '/upload', true);
xhr.send(formData);

但是我的服务器运行 Node JS 得到一个空的响应主体：

var express = require('express');
var bodyParser = require("body-parser");
app.use(bodyParser.urlencoded({
    extended: false
}));
app.post('/upload', function(req, res) {
    console.log(req.body.files);
    res.end();
});

我试过在客户端和服务器端调试，但我无法弄清楚。虽然， formData 对象看起来像这样对我来说似乎很奇怪：

FormData {append: function}
    __proto__: FormData

为什么没有显示附加的 files 对象？

任何关于问题是什么的见解都将不胜感激！

Answer 1

尝试更改

var files = event.dataTransfer.files;

到

var files = event.dataTransfer.files[0];

见https://developer.mozilla.org/en-US/docs/Web/Guide/Using_FormData_Objects ; see also node-form-data

Answer 2

经过很长时间的研究这个问题，我终于弄明白了。问题出在服务器端；我的 Express 应用程序忽略了 post 的主体，因为我没有 明确地 设置 bodyParser 接受 JSON.

POST 方法的 Express 设置应该是：

var express = require('express');
var bodyParser = require("body-parser");
app.use(bodyParser.json()); // Configures bodyParser to accept JSON
app.use(bodyParser.urlencoded({
    extended: false
}));

使用示例路由方法，如：

app.post('/upload', function(req, res) {
    console.log(req.body.files);
    res.end();
});

知道可以通过运行测试此服务器端设置也很有帮助：

curl -d '{"file":{"name":"sample"}}' -H "Content-Type: application/json" http://localhost:8080/upload

POST 请求中的空 FormData

Empty FormData in POST Request

javascript

post

xmlhttprequest

form-data