使用 Multer 和 Ajax (Node) 上传多个图像文件

Question

我有以下 Ajax 上传（来自cropper.js 的 Base64 画布数据），因此 Ajax 上传不是来自表单。

    $('.gogo').on('touchstart mousedown', function(e){
    e.preventDefault();
    e.stopPropagation();
    var img = new Array();
    img[0] = fetchCrop1();
    img[1] = fetchCrop2();      
    $.ajax({
        cache: false,
        type : 'POST',
        url  : 'http://localhost:3001/img', 
        data: { img : img },
        contentType: false,
        processData: false,
        success : function(data) {
            console.log('AJAX: '+data);
        }
    });
});

以及我见过的示例中的 Multer 脚本

var storage =   multer.diskStorage({
  destination: function (req, file, callback) {
    callback(null, '/img');
},
  filename: function (req, file, callback) {
    callback(null, file.fieldname + '-' + Date.now());
  }
});

app.post('/img',function(req,res){
  var upload = multer({ storage : storage }).array('img',2);
  upload(req,res,function(err) {
    console.log(req.body);
    console.log(req.files);
    if(err) {
        return res.end("Error uploading file.");
    }
    res.end("File is uploaded");
  });
});

我已经阅读了许多帖子，但运气不佳，因为我不断将 req.body 和 req.files 设为 {} 和未定义。

我尝试了不同的 contentType 和单个上传，但显然我遗漏了一些东西，或者 JQuery Ajax 不适用于 Multer 多个文件？

我对 Node 比较陌生（LAMP 人），确实觉得 JavaScript 语法有点陌生。

我只想上传两张Base64图片到服务器/img文件夹。

我相信从cropper.js 中Base64 可以正常工作，下面是该函数的代码

function fetchCrop1(){
/* Note that images greater than 1000px are rejected by the server */
    var $image = $('#image');
    result = $image.cropper("getCroppedCanvas", "{ "width": 1000, 
    "height": 700 }", '');
    $(document).find('#dataImg').val(result.toDataURL('image/jpeg'));
    $('#dataImg').attr('value');
    $('#download').attr('href', result.toDataURL('image/jpeg'));    
    return $('#dataImg').attr('value');     
}    

Answer 1

我选择不使用 Multer，而是使用 body-parser 并将字符串发送到服务器端进行转换

app.post('/crop',function(req,res){
 var ts = null;
for(i=1;i<3;i++){
 if(i == 1){
 var x = req.body.img1;
 console.log(parseInt((x).replace(/=/g,"").length * 0.75));
 }else{
 var x = req.body.img2;  
 console.log(parseInt((x).replace(/=/g,"").length * 0.75));
 }
 var decodedImg = decodeBase64Image(x);
 var imageBuffer = decodedImg.data;
 var type = decodedImg.type;
 var extension = mime.extension(type);
 if(i == 1){
    var ts = Date.now();
    var fileName =  "image"+ts+"." + extension;
 }else{
    var fileName =  "image"+ts+"-th." + extension;
 }
 try{
    console.log(fileName,extension,type);
       fs.writeFileSync("img/" + fileName, imageBuffer, 'utf8');
    }
 catch(err){
    console.log(err)
 }
}
}); 

function decodeBase64Image(dataString) {
 var matches = dataString.match(/^data:([A-Za-z-+\/]+);base64,(.+)$/),
 response = {};

 if (matches.length !== 3) {
  return new Error('Invalid input string');
 }

 response.type = matches[1];
 response.data = new Buffer(matches[2], 'base64');

 return response;
}

和客户端

 $('.gogo').on('touchstart mousedown', function(e){
    e.preventDefault();
    e.stopPropagation();
    //var img = new Array();
    img1 = fetchCrop1();
    img2 = fetchCrop2();        
    $.ajax({
        cache: false,
        type : 'POST',
        url  : 'http://localhost:3001/crop', 
        data: { img1 : img1, img2 : img2 },
        contentType: "application/x-www-form-urlencoded",
        success : function(data) {
            console.log('AJAX: '+data);
        }
    });
});

function fetchCrop1(){
/* Note that images greater than 1000px are rejected by the server */
    var $image = $('#image');
    result = $image.cropper("getCroppedCanvas", {width: 1000, height: 800});
    $(document).find('#dataImg1').val(result.toDataURL('image/jpeg'));
    return $('#dataImg1').attr('value');        
}    
function fetchCrop2(){
/* Note that images greater than 1000px are rejected by the server */
    var $image = $('#image');
    result = $image.cropper("getCroppedCanvas", {width: 300, height: 250});
    $(document).find('#dataImg2').val(result.toDataURL('image/jpeg'));
    return $('#dataImg2').attr('value');        
}

我确信有更优雅的方式，但它可以工作（并且仍然是 WIP）（使用cropper.js 插件）。