JQuery에서 Node JS로 이미지 업로드

Question

HTML 페이지에서 이미지 파일을 업로드해야합니다. 그러나 나중에 form 필드 (텍스트 필드, 체크 박스 등)가 있기 때문에 나중에 서버에 데이터를 전달하는 데 사용되므로 form 태그를 사용하지 않을 것입니다.

내 백 엔드는 Node JS입니다. 내가 원하는 것은 Node Js 끝에서 이미지 데이터 (파일)를 검색하는 것입니다. 나는

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

}); 

<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 내가 행운으로, 몇 일 동안을 시도하고있다이

HTML을 할 수있는 방법. 누군가 나를 도울 수 있습니까?

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.