Hochladen von Dateien mit Multer ohne Aktion, Methode, encrypt = "multipart/form-data" -Attribute auf Formular-Tag

Question

Also versuche ich ein Bild mit Multer hochladen, aber ich möchte Angulars $ http.post zum Hochladen der Datei. Keine Schaltfläche zum Senden haben die Formularmethode und Aktion ausgelöst. Das Problem ist, wenn ich die Attribute encrypt, method oder post nicht benutze, ist die req.file nicht definiert und das Bild wird nicht im Ordner uploads angezeigt.

Also meine Frage ist, gibt es eine Möglichkeit, wie ich Multer-Datei-Upload nicht mit der regulären Form Methode mit Aktion, sondern eckig $ http.post() verwenden kann. Wenn ich es jetzt mache, ist die req.file immer undefiniert.

Hier ist mein Code als Referenz

app.js (Node)

var express = require('express'); 
var http = require('http'); 
var path = require('path'); 
var fs  = require('fs'); 
var crypto = require('crypto'); 
var multer = require('multer'); 
var bodyParser = require('body-parser'); 
var app = express(); 
var port = process.env.port || 8080; 

app.set('view engine', 'ejs'); 
app.use('/assets', express.static(__dirname + '/public')); 
app.use(bodyParser.json()); 
app.use(bodyParser.urlencoded({ extended: false })); 

var path = require('path'); 
var multer = require('multer'); 

var storage = multer.diskStorage({ 
    destination: './public/uploads/', 
    filename: function (req, file, cb) { 
    crypto.pseudoRandomBytes(16, function (err, raw) { 
     if (err) { return cb(err); } 
      cb(null, raw.toString('hex') + path.extname(file.originalname)); 
    }); 
    } 
}); 

var upload = multer({ storage: storage }); 

app.get('/', function (req, res) { 
    'use strict'; 
    res.render('index', {filename: filename }); 
}); 

app.post('/', function (req, res) { 
    'use strict'; 
}); 

app.post('/upload', upload.single('image'), function (req, res) { 
    filename = req.files; 
    console.log(req.files); 
}); 

app.listen(port); 

HTML Form:

<form action="/upload" method="post" encrypt="multipart/form-data"> 
<div class="form-group"> 
<label for="image">Choose Image</label> 
<input id="inputImage" name="image" type="file"> 
<button class="form-control" ng-click="uploadFile()">Add</button> 
</form> 

Deshalb möchte ich im Grunde dieses Standardverhalten entfernen und immer noch die erf .file Objekt.

Und schließlich mein Eckige Code:

$scope.uploadFile = function(){ 
     var file = $scope.myFile; 
     var uploadUrl = "/upload"; 
     var fd = new FormData(); 
     fd.append('file', file); 

     $http.post(uploadUrl,fd, { 
       transformRequest: angular.identity, 
       headers: {'Content-Type': undefined} 
     }) 
     .success(function(){ 
      console.log("success!!"); 
     }) 
     .error(function(){ 
      console.log("error!!"); 
     }); 
    }; 

Bitte helfen Sie mir zu diesem Thema ... Im Moment habe ich das $ http.post() .error() Rückruf und wenn ich tief in sie, es ist, weil req.file in meinem Knoten nicht definiert ist app.js

Answer 1

Warum verwenden Sie headers: {'Content-Type': undefined} Sie sollten Inhaltstyp für Bilder anstelle von undefined Oder sonst entfernen Sie diesen Header und versuchen. Auch durch die Verwendung von console.log (req.body) können Sie überprüfen, welche Körper Sie einreichen