如何通过jQuery将文件发送到nodejs connect-busboy

时间:2017-07-16 23:10:56

标签: javascript jquery node.js 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:无法读取属性&#39;结束&#39;未定义的

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

完整错误:http://i.imgur.com/vUqmjWS.png

1 个答案:

答案 0 :(得分:1)

通过显式序列化表单,您隐式地避免/删除了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');
    }
});