javascript - Get multipartform data in request Nodejs - Stack Overflow

admin管理员组

文章数量:1391860

I am submitting form using ajaxForm plugin for saving images this is client Js snippet:

$('#saveProfileImage').ajaxForm(options);

$('#saveProfileImage').submit(function(e){
    e.preventDefault();
    cropBoxData = $image.cropper('getData');
    $('#image-height').val(cropBoxData.height);
    $('#image-width').val(cropBoxData.width);
    $('#image-x').val(cropBoxData.x);
    $('#image-y').val(cropBoxData.y);
    alert("Submittin");
})

And saving image file with blueimp-file-upload-expressjs Server side code:

router.post('/updateprofilemedia/v1', function(request, response, next){
    console.log("Enter in updateprofilev1");
    console.log(request.data);//why i am getting empty here
    console.log(request.files)// getting undefined
    var options = {
        tmpDir: __dirname + '/../public/user_images',
        uploadDir: __dirname + '/../public/user_images',
        uploadUrl: '/uploaded/files/',
        copyImgAsThumb : false,
        storage: {
          type: 'local'
        }
      };
    var uploader = require('blueimp-file-upload-expressjs')(options);
    uploader.post(request, response, function(error, obj) {
        console.log("")
    });
});

Everything is fine image is saving perfectly. But i am sending extra data with request but i am getting empty here at request.data. and solution???

When i have used connect-multiparty middleware i got following request.files, but now Uploading module not uploading image.

{ proflie_image: 
   { fieldName: 'proflie_image',
     originalFilename: 'profile.jpg',
     path: '/tmp/3959-hjf57u.jpg',
     headers: 
      { 'content-disposition': 'form-data; name="proflie_image"; filename="profile.jpg"',
        'content-type': 'image/jpeg' },
     ws: 
      { _writableState: [Object],
        writable: true,
        domain: null,
        _events: [Object],
        _maxListeners: 10,
        path: '/tmp/3959-hjf57u.jpg',
        fd: null,
        flags: 'w',
        mode: 438,
        start: undefined,
        pos: undefined,
        bytesWritten: 92450,
        closed: true },
     size: 92450,
     name: 'profile.jpg',
     type: 'image/jpeg' } }

This is following view i can see in my console:

I am submitting form using ajaxForm plugin for saving images this is client Js snippet:

$('#saveProfileImage').ajaxForm(options);

$('#saveProfileImage').submit(function(e){
    e.preventDefault();
    cropBoxData = $image.cropper('getData');
    $('#image-height').val(cropBoxData.height);
    $('#image-width').val(cropBoxData.width);
    $('#image-x').val(cropBoxData.x);
    $('#image-y').val(cropBoxData.y);
    alert("Submittin");
})

And saving image file with blueimp-file-upload-expressjs Server side code:

router.post('/updateprofilemedia/v1', function(request, response, next){
    console.log("Enter in updateprofilev1");
    console.log(request.data);//why i am getting empty here
    console.log(request.files)// getting undefined
    var options = {
        tmpDir: __dirname + '/../public/user_images',
        uploadDir: __dirname + '/../public/user_images',
        uploadUrl: '/uploaded/files/',
        copyImgAsThumb : false,
        storage: {
          type: 'local'
        }
      };
    var uploader = require('blueimp-file-upload-expressjs')(options);
    uploader.post(request, response, function(error, obj) {
        console.log("")
    });
});

Everything is fine image is saving perfectly. But i am sending extra data with request but i am getting empty here at request.data. and solution???

When i have used connect-multiparty middleware i got following request.files, but now Uploading module not uploading image.

{ proflie_image: 
   { fieldName: 'proflie_image',
     originalFilename: 'profile.jpg',
     path: '/tmp/3959-hjf57u.jpg',
     headers: 
      { 'content-disposition': 'form-data; name="proflie_image"; filename="profile.jpg"',
        'content-type': 'image/jpeg' },
     ws: 
      { _writableState: [Object],
        writable: true,
        domain: null,
        _events: [Object],
        _maxListeners: 10,
        path: '/tmp/3959-hjf57u.jpg',
        fd: null,
        flags: 'w',
        mode: 438,
        start: undefined,
        pos: undefined,
        bytesWritten: 92450,
        closed: true },
     size: 92450,
     name: 'profile.jpg',
     type: 'image/jpeg' } }

This is following view i can see in my console:

• javascript
• node.js
• request

Share Improve this question Follow edited Jun 22, 2015 at 18:30 Manwal asked Jun 22, 2015 at 17:57 ManwalManwal 23.8k1515 gold badges6565 silver badges9595 bronze badges 4

• What middleware are you using? – Bidhan Commented Jun 22, 2015 at 18:00
• @BidhanA is it very necessary to use middleware? Files are saving perfectly without using any. For data do i have to use any? – Manwal Commented Jun 22, 2015 at 18:01
• Yes you need to use a middleware like bodyparser to parse the request. – Bidhan Commented Jun 22, 2015 at 18:02
• Update question for more clarity – Manwal Commented Jun 22, 2015 at 18:11

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

I find this solution, may be you can want to look this. Multiparty is a module that help access both image and text fields when form arttribute is enctype="multipart/form-data".it is very useful. When you didnt specify enctype, its default is 'application/x-www-form-urlencoded'. But it is hardfull for controll images. So if we want to send image ,we use "multipart/form-data" .

var multiparty = require('multiparty');

 var form = new multiparty.Form();
    form.parse(req, function(err, fields, files) {
        if(err){ 
            throw err; 
        }else{
          console.log(fields.productType+" "+fields.imgOrder+" "+fields.productİd);
            //files iare images
            //fields are fields, you can access now to them
            // it save image in temporary file
        }
}

An alternative would be to use the multer middleware. Example:

var multer = require('multer');

// ...

router.post('/updateprofilemedia/v1',
            multer({ dest: __dirname + '/../public/user_images' }),
            function(request, response, next) {
  // ...
});

本文标签： javascriptGet multipartform data in request NodejsStack Overflow