使用XMLHttpRequest将多个file upload到Express.js 3.5服务器

我正在尝试在JavaScript中使用原生FileAPI构buildfile upload器，并且我想通过XMLHttpRequest（不带jQuery）将file upload到使用Express.js的Node.js服务器。

文件阅读部分工作正常，当我上传文件没有XMLHttpRequest它完美的作品（文件在Express.js req.files ）。

问题是通过AJAX上传： req.files总是空的。

下面是一些代码：

表格：

<form action="http://localhost:3000/upload" method="POST" enctype="multipart/form-data" name="form"> <input type="file" name="uploads" id="files" multiple="multiple"> <input type="submit" name="submit" value="submit"> </form> 

前端的上传部分（在文件[0] .data中是一个文件 – 不是一个数组或东西）：

 function uploadFiles(files) { var xhr = new XMLHttpRequest(); xhr.submittedData = files; // Array of objects with files included. But it neither works with an array of files nor just one file xhr.onload = successfullyUploaded; xhr.open("POST", "http://localhost:3000/upload", true); xhr.setRequestHeader('X-Requested-With','XMLHttpRequest'); xhr.send(); } 

出现问题的后端：

 exports.receiveUpload = function(req, res){ console.log(req.files); // empty var files = req.files.uploads; // always empty with AJAX upload. with normal upload it's fine console.log(req.xhr); // true // ... } 

这里有一些Express.jsconfiguration（我已经有没有AJAX相同的错误 – 在代码中的注释，你可以看到行和堆栈溢出post，解决了上传没有AJAX）：

 // all environments app.set('port', process.env.PORT || 3000); app.set('views', path.join(__dirname, 'views')); app.set('view engine', 'ejs'); app.use(express.favicon()); app.use(express.logger('dev')); app.use(express.json()); app.use(express.urlencoded()); // this 3 lines have to be before app.use(app.router) // https://stackoverflow.com/questions/21877098/upload-file-using-express-failed-cannot-read-property-of-undefined app.use(express.multipart()); app.use(express.bodyParser({ keepExtensions: true, uploadDir: path.join(__dirname, 'public', 'uploads') })); app.use(express.methodOverride()); app.use(app.router); app.use(require('less-middleware')(path.join(__dirname, '/public'))); app.use(express.static(path.join(__dirname, 'public'))); 

提前致谢！

问候，

C。

Answer 1

Thx到@Pengtuzi我解决了它：

我使用FormData API来上传文件。 我的错误是我认为错误会发生在服务器上。

这是为我解决它的代码：

 function uploadFiles(files) { var xhr = new XMLHttpRequest(); var formData = new FormData(); xhr.onload = successfullyUploaded; xhr.open("POST", "http://localhost:3000/upload", true); xhr.setRequestHeader('X-Requested-With','XMLHttpRequest'); for(var file in files) { formData.append("uploads", files[file].data); } xhr.send(formData); }