MEANアプリでムルターを使用してファイルをアップロード

Question

私はあなたの助けが必要です。これは私のアプリの進行を止めるために非常に重要です。私はすべてを試しましたが、私は混乱しています。私はmulterを使ってファイルをアップロードしようとします。自分のコードにPOSTMANを使用すると、応答が'File uploaded'になりますが、すべてがOKだと思われますが、何も起こりません。つまり、req.file is undefinedがどのように変わったのかわかりません。私のコードで見てください

サーバー

var express = require('express'); 
var app = express(); 
var port = process.env.PORT || 8080; 
var morgan = require('morgan'); 
var path = require('path'); 
var multer = require('multer'); 
var mongoose = require('mongoose'); 
var bodyParser = require('body-parser'); 
var router = express.Router(); 
var appRoutes = require('./app/routes/api')(router,multer,path); 
var passport = require('passport'); 
var social = require('./app/passport/passport')(app,passport); 
var product = require('./app/seed/product-seeder'); 

app.use(morgan('dev')); 
app.use(bodyParser.json()); 
app.use(bodyParser.urlencoded({ extended: true })); 
app.use(express.static(__dirname + '/public')); 
app.use('/api', appRoutes); 

mongoose.connect('mongodb://localhost:27017/tutorial', function(err){ 
if(err){ 
    console.log('MongoDB not connected' + err) 
} else { 
    console.log('Scuccessfully connected to MongoDB database'); 
} 
}) 
app.get('*', function(req, res){ 
res.sendFile(path.join(__dirname + '/public/app/views/index.html')) 
}) 

app.listen(port, function(){ 
console.log('Running the server on port ' + port) 
}); 

API

module.exports = function(router,multer,path) { 
var storage = multer.diskStorage({ 
destination: function(req, file, callback) { 
    callback(null, './uploads') 
}, 
filename: function(req, file, callback){ 
    callback(null, file.fieldname + '-' + Date.now() + path.extname(file.originalname)) 
} 
}) 
router.post('/courses/files', function(req, res) { 
    var upload = multer({ storage: storage }).single('file') 
    upload(req, res, function(err) { 
     res.end('File is uploaded') 
     console.log(req.file) 
    }) 
    }) 

    return router 
} 

サービス

userFactory.storeFile = function(file){ 
    return $http.post('/api/courses/files', file) 
} 

HTML

<div class="container management-user"> 
    <form enctype="multipart/form-data" name="sendFile" ng-submit="product.sendFile(file)" novalidate> 
    <input type="file" name="file" id="imgInp"> 
    <input type="submit" value="submit"> 
    </form> 
</div> 

コントローラ

.directive('fileModel', ['$parse', function($parse) { 
     function fn_link(scope, element, attrs) { 
      var onChange = $parse(attrs.fileModel); 
      element.on('change', function (event) { 
       onChange(scope, { $files: event.target.files }); 
      }); 
     }; 
     return { 
      link: fn_link 
     } 
    }]) 

以下のようにディレクティブを使用する

app.sendFile = function(file, valid) {   
    User.storeFile(app.file).then(function(data){ 
     console.log(data) 
    }); 
} 

Answer 1

てみその後

<input type="file" id="fileId" accept="image/*" file-model="myFiles($files)"/> 

に入力タイプ=ファイルを置き換えた後、お使いのコントローラにこの

var formData = new FormData(); 
     $scope.myFiles = function($files) { 
      formData.append('img', $files[0]); 
} 

を追加します

、あなたが何かを追加したい場合は、バックエンド のようにそれをしたい名前に「IMG」を交換してください

formData.append('title', form.title); 

として を送信するためにFORMDATA内のキーとそれぞれすべての値を追加し、$ HTTP方法

$http.post('/api/courses/files', formData).then(...) 

ノード側 その後、サーバーにファイルをアップロードするようmulter diskStorageを使用

var uploadMulter = multer.diskStorage({ 
    destination: function(req, file, callback) { 
     callback(null, "./UploadDir"); 
    }, 
    filename: function(req, file, callback) { 
     callback(null, Date.now() + path.extname(file.originalname)); 
    } 
}); 

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

./UploadDirは、先のあなたのファイル

をアップロードするフォルダと

router.post('/courses/files', upload.single('img'), function(req,res){ 
console.log(req.file);}); 

今あなたは、単一のファイルの使用upload.singleをアップロードしたい場合は最終的にあなたのルータです（ 'img'） **複数回使用する** upload.array（ 'img'、3）ここに3つのファイルがアップロードされます。あなたが望むように変更してください。

あなたの先のディレクトリUploadDirは、あなたが角度で（FORMDATAを）CONSOLE.LOGしようとする場合、それは常に任意のものを表示しないようにそのプロパティとして定義されませんことを

app.use('/UploadDir', express.static(path.join(__dirname, 'UploadDir')))