代码之家 › 专栏 › 技术社区 › Mat.Now

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

multer express node.js angularjs

Mat.Now · 技术社区 · 9 年前

'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)
});

应用程序编程接口

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)
    });
}

1 回复 | 直到 9 年前

Nasiruddin Saiyed 9 年前

尝试使用以下指令

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

如果要添加某些内容,请使用formData中的键添加每个值以发送 像

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

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

节点侧

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 });

是要上载文件的目标文件夹

最后是你的路由器

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

现在,如果你想上传单个文件,请使用 upload.single('img') 这里将上载3个文件。随心所欲地改变。

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