node.js multer req.file immer undefined

Question

im eine Datei mit multer hochladen triying aber immer die req.file ist nicht definiert und der Zielordner ist leer:

Server:

var express = require('express'); 
var multer = require('multer') 
var app = express(); 

    var storage = multer.diskStorage({ 
      destination: function(req, file, cb) { 
       cb(null, './public/uploads/'); // Make sure this folder exists 
      }, 
      filename: function(req, file, cb) { 
          console.log(file) 
       var ext = file.originalname.split('.').pop(); 
       cb(null, file.fieldname + '-' + Date.now() + '.' + ext); 
      } 
     }), 
     upload = multer({ 
      storage: storage 
     }).single('avatar'); 

    app.post('/uploads', upload, (req, res) => { 
     console.log('body', req.body); 
     console.log('file', req.file); 
       res.json("ok") 
    }); 

Client:

Ich habe viele Antworten angeschaut, aber nichts hat funktioniert.

 <form id="myform" encrypt="multipart/form-data"> 
     <label for="userName">Name</label> 
     <input type="text" name="userName"/> 
     <br> 
     <label for="phoneNumber">PhoneNumber</label> 
     <input type="text" name="phoneNumber"/> 
     <br> 
     <label for="file">UploadFile</label> 
     <input type="file" name="avatar"/> 
     <input type="submit"/> 
    </form> 

$('#myForm').submit(function(e){ 

     var formData = new FormData($(this)[0]); 
     $.ajax({ 
      type:'POST', 
      url:'uploads', 
      data : formData, 
      contentType: true, 
      processData: false 
     }).done(function(data){ 
      //print response on success 
      console.log(data); 

     }).fail(function(data) { 
       console.log('Error'); 
      }); 
     e.preventDefault(); 
     }); 

Können Sie mir sagen, was ich falsch mache bitte?

Answer 1

fand ich den Fehler in der Ajax ich den Inhaltstyp auf false gesetzt haben:

$('#myForm').submit(function(e){ 

     var formData = new FormData($(this)[0]); 
     $.ajax({ 
      type:'POST', 
      url:'uploads', 
      data : formData, 
      contentType: false, // <----------------- 
      processData: false 
     }).done(function(data){ 
      //print response on success 
      console.log(data); 

     }).fail(function(data) { 
       console.log('Error'); 
      }); 
     e.preventDefault(); 
     }); 

Dank @Marc.

Answer 2

Warum haben Sie $('#myForm').submit(function(e){...}) implementiert?

Sie haben einen Tippfehler in Ihrem <form> Element. Das Attribut heißt enctype, nicht "verschlüsseln". Und Sie könnten einfach das method="POST" Attribut hinzufügen und alle Javascript entfernen und den Browser zum Hochladen zulassen.

Probe:

<form method="POST" action="/uploads" enctype="multipart/form-data"> 
..... 
</form>