在 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 替换为

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

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

Upload file using multer in MEAN app

node.js

express

angularjs

multer