Question

我正在创建一个简单的应用程序，它将上传文件作为已拖放到画布上的服务器。

以下是拖放代码的示例：

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;另见node-form-data

Answer 2

经过太长时间处理这个问题后，我终于明白了。问题是服务器端;我的Express应用程序忽略了帖子的主体，因为我没有显式设置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

2 个答案: