Node.js - 使用 ajax 和强大的提交表单的一部分

Question

在我的 node.js / express.js 应用程序中，我尝试使用 ajax 发布表单的一部分。 为此，我阅读了一个使用 formidable 中间件的示例。

这是 HTML：

<!-- some form elements -->

<input type="file" id="upload_image" name="upload_image" />

<!-- other form elements with submit -->

客户端javascript：

$(document).ready(function() {

    if(document.addEventListener) {
        document.getElementById("upload_image").addEventListener("change", function(e){
            uploadImages(e);
        });
    } else {
        document.getElementById("upload_image").attachEvent("onchange", function(e){
            uploadImages(e);
        });
    }

    function uploadImages(e) {

        var formData = new FormData();
        var xhr = new XMLHttpRequest();

        var onReady = function(e) {
            // ready state
            if(this.readyState == this.DONE) {
                if(this.status != 200) {
                    console.log('error !!!');
                } else {
                    if(xhr.responseText == 'success') {
                        console.log('succes !!!');
                    }
                }
            }
        };

        var onError = function(err) {
            // something went wrong with upload
            console.log('error ...');
        };

        console.log(e.target.files[0]);
        formData.append('files', e.target.files[0]);

        xhr.open('post', "/markers/upload_image", true);
        xhr.addEventListener('error', onError, false);
        xhr.send(formData);
        xhr.addEventListener('readystatechange', onReady, false);
    }
});

这是服务器端：

router.post('/markers/upload_image', function (req, res) {

    //return console.log(req.files.files);

    var form = new formidable.IncomingForm();
    form.uploadDir = __dirname + 'client/tmp';
    form.encoding = 'binary';

    form.addListener('file', function(name, file) {
        // do something with uploaded file
    });

    form.addListener('end', function() {
        res.end();
    });

    form.parse(req, function(err, fields, files) {
        if (err) {
            console.log(err);
        }
    });

});

那么，这就是注释行return console.log(req.files.files);的结果：

{ fieldName: 'files',
  originalFilename: 'myimage.jpg',
  path: '/var/folders/jb/jttwq52s7nn3s18_36y_xq300000gp/T/31093-14r558u.jpg',
  headers: 
   { 'content-disposition': 'form-data; name="files"; filename="vespa.jpg"',
     'content-type': 'image/jpeg' },
  ws: 
   { _writableState: 
      { highWaterMark: 16384,
        objectMode: false,
        needDrain: true,
        ending: true,
        ended: true,
        finished: true,
        decodeStrings: true,
        defaultEncoding: 'utf8',
        length: 0,
        writing: false,
        sync: false,
        bufferProcessing: false,
        onwrite: [Function],
        writecb: null,
        writelen: 0,
        buffer: [],
        errorEmitted: false },
     writable: true,
     domain: null,
     _events: { error: [Object], close: [Object] },
     _maxListeners: 10,
     path: '/var/folders/jb/jttwq52s7nn3s18_36y_xq300000gp/T/31093-14r558u.jpg',
     fd: null,
     flags: 'w',
     mode: 438,
     start: undefined,
     pos: undefined,
     bytesWritten: 591626,
     closed: true },
  size: 591626,
  name: 'myimage.jpg',
  type: 'image/jpeg' }

怎么了？任何帮助将不胜感激。

编辑：返回的错误：

POST /markers/upload_image - - ms - -
Error: Request aborted
at IncomingMessage.onReqAborted (/Users/cedric/Projects/my-project/node_modules/express/node_modules/connect/node_modules/multiparty/index.js:182:17)
at IncomingMessage.emit (events.js:117:20)
at abortIncoming (http.js:1915:11)
at Socket.serverSocketCloseListener (http.js:1927:5)
at Socket.emit (events.js:117:20)
at TCP.close (net.js:465:12)
[Error: Request aborted]

编辑：尝试formidable's doc 示例，给出相同的错误：

router.get('/test', function(req, res) {

    // show a file upload form
    res.writeHead(200, {'content-type': 'text/html'});
    res.end(
        '<form action="/test" enctype="multipart/form-data" method="post">'+
        '<input type="text" name="title"><br>'+
        '<input type="file" name="upload" multiple="multiple"><br>'+
        '<input type="submit" value="Upload">'+
        '</form>'
     );

});

router.post('/test', function(req, res) {

    // parse a file upload
    var form = new formidable.IncomingForm();

    form.parse(req, function(err, fields, files) {
        res.writeHead(200, {'content-type': 'text/plain'});
        res.write('received upload:\n\n');
        res.end(util.inspect({fields: fields, files: files}));
    });

    return;

});

Answer 1

我找到了解决办法！

我使用 express 3.x ...并且对于这个版本，formidable 包括在内！

因此，不需要创建新的IncomingForm，只需在请求中使用Formidable 表单对象即可：

/* express server code */

// add this param for multipart processing
router.use(express.bodyParser({defer: true}));

// on the route code, get the Formidable form object from request
var form = req.form;
/* ...*/

希望对您有所帮助！