req.file ist undefined (multer, node.js)

Question

Ich habe versucht, ein Bild für eine Weile zu laden, aber req.file ist immer noch undefiniert. Kann jemand sehen warum?

this is my page. I am able to pick an image when I click the '+' glyphicon, but on the server side req.file is still empty.

EJS

Eingabedatei [type = "file"] und input [type = "submit"] haben CSS-Stile display: none

<form action="/profile/addProfilepicture" method="post" id="form" enctype="multipart/form-data"> 
      <span id="upload" class="glyphicon glyphicon-plus-sign"></span> 
      <label for="profilePic"></label> 
      <input id=profilePic type='file' /> 
      <input type="submit"> 
     </form> 

     <img class="profileImg" 
      src="<%="images/pexels-photo-370799.jpeg"%>" 
      alt="fail"> 

Client-JS-Datei

Wenn ich auf das Glyphon "+" klicke, kann ich ein Bild auswählen. Wenn Sie dies tun, löst dies das Formular aus, um eine Postanforderung zu senden und zu senden.

$("#upload").on('click',function() { 
     $("input[type='file']").click(); 
    }); 

    $('input[type="file"]').change(function (e) { 
     $("input[type='submit']").click() 
    }); 

Server-Seite JS

Auf der Serverseite stoppt es an:

TypeError: Cannot read property 'filename' of undefined at C:\Users\Tijl Declerck\Desktop\projects\digitalNomadApp\routes\profile.js:27:38 at Immediate._onImmediate (C:\Users\Tijl Declerck\Desktop\projects\digitalNomadApp\node_modules\multer\lib\make-middleware.js:53:37) at runCallback (timers.js:793:20) at tryOnImmediate (timers.js:751:5) at processImmediate [as _immediateCallback] (timers.js:722:5)

Die console.logs Ich versuchte, gab mir dies: req.body gibt ein leeres Objekt und req.file kehrt undefiniert .

var express = require('express'); 
var router = express.Router(); 
var multer = require('multer'); 
var User = require('../models/Users'); 

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

var upload = multer({ storage: storage }).single('myImage'); 


router.post('/addProfilePicture', function (req, res) { 

    var profilePicUrl = ''; 
    upload(req, res, function (err) { 
     if (err) { 
      // An error occurred when uploading 

     } else { 
      console.log(req.file); 
      profilePicUrl = req.file.filename; 

      User.update({username: req.user.username}, {'profilePic.uploaded': true, 'profilePic.link': profilePicUrl}, function(err, doc){ 
      console.log('THIS IS DONE') 
      }); 
     } 
    }); 
}); 

Answer 1

Sie haben einen Namen Ihrer Datei-Eingabe zur Verfügung zu stellen, und es sollte die einzige Methode Namen übereinstimmen, dann ist dies aus multer doc:

.single(fieldname)

Accept a single file with the name fieldname. The single file will be stored in req.file.

Dies ist nicht gut dokumentiert, aber Feldname bezieht sich auf Eingangsnamen Attribut

EJS Datei

<input id='profilePic' name='myImage' type='file' /> 

Express

... 
var upload = multer({ storage: storage }).single('myImage'); 
...