使用JQuery将图像上传到Node JS

Question

使用JQuery将图像上传到Node JS

3

我需要从我的HTML页面上传一个图片文件，但我不想使用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);

});

我已经尝试了几天，但没有成功。有人能帮我吗？

- Illep

https://github.com/felixge/node-formidable - Abdennour TOUMI

我之前尝试过这个，但是没有用。也许我在代码中应用的方式不对。你能给我演示一下吗？ - Illep

这个回答怎么样？https://dev59.com/2pLea4cB1Zd3GeqP0k41#34442688？ - Abdennour TOUMI

我也试过了。它使用了 multer。 - Illep

希望得到回答。最好的问候。 - Abdennour TOUMI

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Iceman · Accepted Answer

一个使用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 - 文件上传。原作者为Iceman、Aikon Mogwai和Mikhail。归属细节可在贡献者页面中找到。该资源采用CC BY-SA 3.0许可，并可在文档存档中找到。参考主题ID：4080。