在MEAN中使用MULTER上传文件的应用程序

Question

我需要你的帮助，这是非常重要的，因为停止我的应用程序的进展。我尝试了一切，但我很困惑。我尝试使用MULTER上传文件，如果我使用POSTMAN作为我的代码，我得到的回应是'File uploaded'这就是一切似乎没问题，但没有任何反应，即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> 

控制器

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

Answer 1

尝试使用指令如下

.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 
     } 
    }]) 

然后更换输入类型=文件

<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键每一个值发送 作为

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

和你的$ 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是无法访问的尝试

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