Empty FormData in POST Request

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); 

Но мой сервер, работающий узел 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

После слишком долгого времени, работая над этой проблемой, я, наконец, понял это. Проблема была серверной; мое экспресс-приложение игнорировало тело сообщения, так как у меня нет явно установить bodyParser, чтобы принять JSON.

Экспресс установка для метода POST должен быть:

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 

Answer 2

Try изменения

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