將圖像從JQuery上傳到Node JS

Question

我需要從我的HTML頁面上傳圖像文件。但是，我不打算使用form標籤，因爲還有其他form字段（文本字段，複選框等）將用於稍後將數據傳遞到服務器。

我的後臺在Node JS。所有我想要的是從Node Js結束檢索圖像數據（文件）。我怎樣才能做到這一點

HTML

<div class="container"> 
    <div class="row"> 
     <div class="col-xs-12"> 
     <div class="panel panel-default"> 
      <div class="panel-body"> 
      <span class="glyphicon glyphicon-cloud-upload"></span> 
      <h2>File Uploader</h2> 
      <h4>coligo.io</h4> 
      <div class="progress"> 
       <div class="progress-bar" role="progressbar"></div> 
      </div> 
      <button class="btn btn-lg upload-btn" type="button">Upload File</button> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
<input id="upload-input" type="file" name="uploads" multiple="multiple"></br> 

JQuery的

$('.upload-btn').on('click', function(){ 
    $('#upload-input').click(); 
    $('.progress-bar').text('0%'); 
    $('.progress-bar').width('0%'); 
}); 

$('#upload-input').on('change', function(){ 

    var files = $(this).get(0).files; 

    if (files.length > 0){ 
    // create a FormData object which will be sent as the data payload in the 
    // AJAX request 
    var formData = new FormData(); 
     // loop through all the selected files and add them to the formData object 
    for (var i = 0; i < files.length; i++) { 
     var file = files[i]; 
var tmppath = URL.createObjectURL(event.target.files[0]); 
     // add the files to formData object for the data payload 
     formData.append('uploads', tmppath); 

    } 
    $.ajax({ 
     url: '/myp/imgup', 
     type: 'POST', 
     data: formData, 
     processData: false, 
     contentType: false, 
     success: function(data){ 
      console.log('upload successful!\n' + data); 
     }, 
     xhr: function() { 
     // create an XMLHttpRequest 
     var xhr = new XMLHttpRequest(); 

     // listen to the 'progress' event 
     xhr.upload.addEventListener('progress', function(evt) { 

      if (evt.lengthComputable) { 
      // calculate the percentage of upload completed 
      var percentComplete = evt.loaded/evt.total; 
      percentComplete = parseInt(percentComplete * 100); 

      // update the Bootstrap progress bar with the new percentage 
      $('.progress-bar').text(percentComplete + '%'); 
      $('.progress-bar').width(percentComplete + '%'); 

      // once the upload reaches 100%, set the progress bar text to done 
      if (percentComplete === 100) { 
       $('.progress-bar').html('Done'); 
      } 

      } 

     }, false); 

     return xhr; 
     } 
    }); 

    } 
}); 

NODE JS

router.post('/imgup', function(req, res){ 
    console.log(' File name '+req.files.upload); 

}); 

我一直在嘗試了這一點了好幾天，沒有運氣。有人可以幫我嗎。

Answer 1

使用multer模塊的一個例子：

var express = require("express"); 
var multer = require('multer'); 
var app   = express(); 
app.get('/',function(req,res){ 
     res.sendFile(__dirname + "/index.html"); 
}); 


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

app.post('/api/file',function(req,res){ 
    var upload = multer({ storage : storage}).single('userFile'); 
    upload(req,res,function(err) { 
     if(err) { 
      return res.end("Error uploading file."); 
     } 
     res.end("File is uploaded"); 
    }); 
}); 

app.listen(3000,function(){ 
    console.log("Working on port 3000"); 
}); 

與formidable模塊的一個例子：

var formidable = require('formidable'), 
http = require('http'), 
util = require('util'); 

http.createServer(function(req, res) { 
    if (req.url == '/upload' && req.method.toLowerCase() == 'post') { 
    // parse a file upload 
    var form = new formidable.IncomingForm(); 

    form.parse(req, function(err, fields, files) { 
     if (err) 
      do-smth; // process error 

     // Copy file from temporary place 
     // var fs = require('fs'); 
     // fs.rename(file.path, <targetPath>, function (err) { ... });   

     // Send result on client 
     res.writeHead(200, {'content-type': 'text/plain'}); 
     res.write('received upload:\n\n'); 
     res.end(util.inspect({fields: fields, files: files})); 
    }); 

    return; 
    } 

    // show a file upload form 
    res.writeHead(200, {'content-type': 'text/html'}); 
    res.end(
    '<form action="/upload" 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>' 
); 
}).listen(8080); 

從Node.js - File upload摘錄。原作者爲Iceman,Aikon Mogwai和Mikhail。您可以在contributor page上找到歸因細節。信息來源根據CC BY-SA 3.0獲得許可，可在Documentation archive中找到。參考主題ID：4080.