在請求 Nodejs 中獲取多部分/表單數據

Question

我正在使用ajaxForm插件提交表單以保存圖像，這是客戶端 Js 片段：

$('#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");
})

並使用blueimp-file-upload-expressjs服務器端代碼保存圖像文件：

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

一切都很好 圖像完美保存。 但我正在發送額外的數據請求，但我在request.data處變空了。 和解決方案？？？

當我使用連接多方中間件時，我得到了以下request.files ，但現在上傳模塊不上傳圖像。

{ 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' } }

這是我可以在控制台中看到的以下視圖：

Answer 1

我找到了這個解決方案，可能你想看看這個。 Multiparty 是一個模塊，當表單藝術屬性為 enctype="multipart/form-data" 時，它可以幫助訪問圖像和文本字段。它非常有用。 當您沒有指定 enctype 時，它​​的默認值是“application/x-www-form-urlencoded”。 但是對於控制圖像來說很難。 所以如果我們想發送圖像，我們使用“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
        }
}

Answer 2

另一種方法是使用multer中間件。 例子：

var multer = require('multer');

// ...

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