节点.js - 使用 ajax 提交表单的一部分,并且强大

Node.js - Submit a part of a form using ajax and formidable

本文关键字:一部分 表单 js 使用 ajax 提交 节点      更新时间:2023-09-26

在我的节点.js/express.js应用程序中,我尝试使用ajax发布表单的一部分。为了实现这一点,我阅读了一个使用中间件的示例formidable

这是 HTML :

<!-- some form elements -->
<input type="file" id="upload_image" name="upload_image" />
<!-- other form elements with submit -->

客户端脚本:

$(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]

编辑:尝试强大的文档示例,给定相同的错误:

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

我找到了解决方案!

我使用快递 3.x ...对于此版本,包括formidable

所以,不需要创建一个新的IncomingForm,只需在请求中使用Formidable form对象,例如:

/* 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;
/* ...*/

希望对您有所帮助!