Question

我有2个文件：index.html和server.js

var express    =       require("express");
var multer     =       require('multer');
var app        =       express();
var done       =       false;

app.use(multer({ dest: './uploads/',
 rename: function (fieldname, filename) {
    return filename+Date.now();
  },
onFileUploadStart: function (file) {
  console.log(file.originalname + ' is starting ...')
},
onFileUploadComplete: function (file) {
  console.log(file.fieldname + ' uploaded to  ' + file.path)
  done=true;
}
}));

app.get('/',function(req,res){
      res.sendFile(__dirname + '/index.html');
});

app.post('/api/photo',function(req,res){
  if(done==true){
    console.log(req.files);
    res.end("File uploaded.");
  }
});

app.listen(3000,function(){
    console.log("Working on port 3000");
});

<html>
  <head>
    <title>File upload Node.</title>
  </head>
  <body>
      <form id="uploadForm"
          enctype="multipart/form-data"
          action="/api/photo"
          method="post">

      <video id="video"></video>
      <button id="startbutton">Take photo</button>
      <canvas id="canvas"></canvas>
      <img src="" id="photo" alt="photo">

      <input type="submit" value="Upload Image" name="submit">


    </form>
  </body>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.form/3.51/jquery.form.min.js"></script>
  <script>

  (function() {

    var streaming = false,
        video        = document.querySelector('#video'),
        cover        = document.querySelector('#cover'),
        canvas       = document.querySelector('#canvas'),
        photo        = document.querySelector('#photo'),
        startbutton  = document.querySelector('#startbutton'),
        width = 200,
        height = 0;

    navigator.getMedia = ( navigator.getUserMedia || 
                           navigator.webkitGetUserMedia ||
                           navigator.mozGetUserMedia ||
                           navigator.msGetUserMedia);

    navigator.getMedia(
      { 
        video: true, 
        audio: false 
      },
      function(stream) {
        if (navigator.mozGetUserMedia) { 
          video.mozSrcObject = stream;
        } else {
          var vendorURL = window.URL || window.webkitURL;
          video.src = vendorURL ? vendorURL.createObjectURL(stream) : stream;
        }
        video.play();
      },
      function(err) {
        console.log("An error occured! " + err);
      }
    );

    video.addEventListener('canplay', function(ev){
      if (!streaming) {
        height = video.videoHeight / (video.videoWidth/width);
        video.setAttribute('width', width);
        video.setAttribute('height', height);
        canvas.setAttribute('width', width);
        canvas.setAttribute('height', height);
        streaming = true;
      }
    }, false);

    function takepicture() {
      canvas.width = width;
      canvas.height = height;
      canvas.getContext('2d').drawImage(video, 0, 0, width, height);
      var data = canvas.toDataURL('image/png');
      photo.setAttribute('src', data);
    }

    startbutton.addEventListener('click', function(ev){
        takepicture();
      ev.preventDefault();
    }, false);

  })();


  $(document).ready(function() {

     $('#uploadForm').submit(function() {

        $(this).ajaxSubmit({

            error: function(xhr) {
		            status('Error: ' + xhr.status);
            },

            success: function(response) {
		              console.log(response);
            }
	});

	return false;
    });    
});
  </script>
</html>

好的，图片无法上传。我认为这是因为“app.use”适用于input type = file。是事实？我想从网络摄像头上传，我找不到路。

谢谢你的帮助

Answer 1

尝试查看Fileupload jQuery插件https://github.com/blueimp/jQuery-File-Upload及其节点https://github.com/blueimp/jQuery-File-Upload/wiki#javascript的服务器端包

从网络摄像头上传带有节点的图像

1 个答案: