フォームタグ

Question

のaction、method、encrypt = "multipart/form-data"属性を使用せずにMulterでファイルをアップロードするので、Multerで画像をアップロードしようとしていますが、Angularの$ http.postを使用してアップロードしますファイル。送信ボタンがフォームのメソッドとアクションを起動させることはありません。問題は、暗号化、メソッド、または投稿の属性を使用しないと、req.fileが未定義となり、画像がuploadsフォルダに表示されないということです。

私の質問は、アクションのある通常のフォームメソッドではなく、角度の$ http.post（）を使ってMulterファイルをアップロードする方法があるかどうかです。私が今それを行うとき、req.fileは常に定義されていません。

ここに参照のための私のコードは

app.js（ノード）

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 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> 

だから私は基本的に、このデフォルトの動作を削除し、まだREQを取得したいです.fileオブジェクト。

そして最後に、私の角度コード

：

は

$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!!"); 
     }); 
    }; 

この上で私を助けてくださいが...今私は$ http.post（）.ERROR（）コールバックを取得し、私はそれに深く掘る場合は、それを私のノードapp.jsでreq.fileが定義されていないからです

Answer 1

なぜ使用していますかheaders: {'Content-Type': undefined} イメージのコンテンツタイプを未定義ではなく送信する必要があります。 また、console.log（req.body）を使用すると、あなたが投稿した本文を確認することができます