使用 XMLHttpRequest 将多个文件上传到 Express.js 3.5 服务器
Posted
技术标签:
【中文标题】使用 XMLHttpRequest 将多个文件上传到 Express.js 3.5 服务器【英文标题】:Upload multiple files with XMLHttpRequest to Express.js 3.5 Server 【发布时间】:2014-05-26 23:44:51 【问题描述】:我正在尝试使用 javascript 中的本机 FileAPI 构建文件上传器,我想通过 XMLHttpRequest(不带 jQuery)将文件上传到使用 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>
前端的上传部分(在 files[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.js 配置(我已经在没有 AJAX 的情况下遇到了同样的错误 - 在代码中的 cmets 中,您可以看到为没有 AJAX 的上传解决了该问题的行和 Stack Overflow 帖子):
// 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://***.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.
【问题讨论】:
使用 xhr/formData 上传文件:developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/… 我已经阅读了链接,但我错过了一些东西。在您发布链接后,我找到了丢失的部分。谢谢! 【参考方案1】:感谢@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);
【讨论】:
干得好,很高兴该链接可以提供帮助。 :) 干得好,为我工作!但是,对于那些在获取文件时遇到问题的人。formData.append("uploads", files[file]);
为我工作。以上是关于使用 XMLHttpRequest 将多个文件上传到 Express.js 3.5 服务器的主要内容,如果未能解决你的问题,请参考以下文章
$_SERVER["CONTENT_LENGTH"] 使用 XmlHttpRequest 上传文件时返回零