如何通过 jQuery POST 文件到 nodejs connect-busboy
How to POST file via jQuery to nodejs connect-busboy
我可以使用 HTML 表单的 action 属性成功将文件发送到 connect-busboy,如下所示:
<form ref='uploadForm' method="post" action="http://localhost:3000/fileupload" enctype="multipart/form-data" id='uploadForm'>
Select file to upload:
<input type="file" name="sampleFile">
<input type="submit" value="Upload!">
</form>
但是,我不想让我的页面重定向。
我试图通过删除表单标记中的 action 属性并添加具有以下内容的 onclick 函数来将其转换为 jQuery:
$.ajax({
url:'http://localhost:3000/fileupload',
type:'post',
contentType: 'multipart/form-data',
data:$('#uploadForm').serialize(),
success:function(){
alert('Success');
},
error: function() {
alert('Error');
},
});
不幸的是,这对错误不起作用:
TypeError: Cannot read property 'end' of undefined
Nodejs代码如下:
const express = require('express');
const busboy = require('connect-busboy');
const app = express();
app.use(busboy());
const fs = require('fs');
app.post('/fileupload', function(req, res) {
var fstream;
req.pipe(req.busboy);
req.busboy.on('file', function (fieldname, file, filename) {
console.log("Uploading: " + filename);
fstream = fs.createWriteStream(__dirname + '/files/' + filen ame);
console.log(fstream);
file.pipe(fstream);
fstream.on('close', function () {
res.send('Success');
});
});
});
var port = process.env.PORT || 3000;
app.listen(port);
通过显式序列化表单,您隐式地 avoiding/removing multipart/form-data 格式。相反,将 FormData
实例作为 data
传递。您可以从现有表单实例化一个新的 FormData
,例如:
var data = new FormData($('#uploadForm')[0]);
$.ajax({
url: 'http://localhost:3000/fileupload',
type: 'POST',
contentType: false,
processData: false,
cache: false,
data: data,
success: function() {
alert('Success');
},
error: function() {
alert('Error');
}
});
我可以使用 HTML 表单的 action 属性成功将文件发送到 connect-busboy,如下所示:
<form ref='uploadForm' method="post" action="http://localhost:3000/fileupload" enctype="multipart/form-data" id='uploadForm'>
Select file to upload:
<input type="file" name="sampleFile">
<input type="submit" value="Upload!">
</form>
但是,我不想让我的页面重定向。
我试图通过删除表单标记中的 action 属性并添加具有以下内容的 onclick 函数来将其转换为 jQuery:
$.ajax({
url:'http://localhost:3000/fileupload',
type:'post',
contentType: 'multipart/form-data',
data:$('#uploadForm').serialize(),
success:function(){
alert('Success');
},
error: function() {
alert('Error');
},
});
不幸的是,这对错误不起作用:
TypeError: Cannot read property 'end' of undefined
Nodejs代码如下:
const express = require('express');
const busboy = require('connect-busboy');
const app = express();
app.use(busboy());
const fs = require('fs');
app.post('/fileupload', function(req, res) {
var fstream;
req.pipe(req.busboy);
req.busboy.on('file', function (fieldname, file, filename) {
console.log("Uploading: " + filename);
fstream = fs.createWriteStream(__dirname + '/files/' + filen ame);
console.log(fstream);
file.pipe(fstream);
fstream.on('close', function () {
res.send('Success');
});
});
});
var port = process.env.PORT || 3000;
app.listen(port);
通过显式序列化表单,您隐式地 avoiding/removing multipart/form-data 格式。相反,将 FormData
实例作为 data
传递。您可以从现有表单实例化一个新的 FormData
,例如:
var data = new FormData($('#uploadForm')[0]);
$.ajax({
url: 'http://localhost:3000/fileupload',
type: 'POST',
contentType: false,
processData: false,
cache: false,
data: data,
success: function() {
alert('Success');
},
error: function() {
alert('Error');
}
});