Question

我正在尝试使用客户端上的ng-file-upload更改映像名称，并在节点JS上使用multer作为解析器。

我的服务器代码：

var player = document.getElementById("movie_player");
player.getDuration();

我的控制器代码：

var express = require("express");
var app = express();
var server = require("http").createServer(app);
var bodyParser = require('body-parser');
app.use(express.static(__dirname));
var jsonParser = bodyParser.json();
var multer = require('multer');

var storage = multer.diskStorage({ //multers disk storage settings
        destination: function (req, file, cb) {
            cb(null, './content/uploads/')
        },
        filename: function (req, file, cb) {
            var datetimestamp = Date.now();
            cb(null, file.fieldname + '-' + datetimestamp + '.' + file.originalname.split('.')[file.originalname.split('.').length -1]);
            //cb(null,"how are you" + '.' + file.originalname.split('.')[file.originalname.split('.').length -1]);
        }
 });

//multer settings
var upload = multer({storage: storage}).single('file');

/** API path that will upload the files */
app.post('/imageUpload',function(req, res) {
    upload(req,res,function(err){
        if(err){
             res.json({error_code:1,err_desc:err});
             return;
        }
         res.json({error_code:0,err_desc:null});
    })

});
app.get('/*',function(request,response){
    response.sendFile(__dirname + '/index.html');
});
server.listen(8080, function() {
    console.log("Express node js server listening on port %d...", this.address().port);
});

和我的html视图代码：

uploadImagesApp.controller('HomeController',['$scope','uploadImageFactory','Upload','$window',function($scope,uploadImageFactory,Upload,$window){
    $scope.file;
    $scope.submitForm = function(form){ //function to call on form submit
        if (form.file.$valid && $scope.file) { //check if from is valid
            $scope.upload($scope.file); //call upload function
        }
    }

    $scope.upload = function (file) {
        Upload.upload({
            url: 'http://127.0.0.1:8080/imageUpload', //webAPI exposed to upload the file
            data:{file:file} //pass file as data, should be user ng-model
        }).then(function (resp) { //upload function returns a promise
            if(resp.data.error_code === 0){ //validate success
                $window.alert('Success ' + resp.config.data.file.name + 'uploaded. Response: ');
            } else {
                $window.alert('an error occured');
            }
        }, function (resp) { //catch error
            console.log('Error status: ' + resp.status);
            $window.alert('Error status: ' + resp.status);
        }, function (evt) { 
            console.log(evt);
            var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
            console.log('progress: ' + progressPercentage + '% ' + evt.config.data.file.name);
            $scope.progress = 'progress: ' + progressPercentage + '% '; // capture upload progress
        });
    };
}]);

我想在表单中输入文件名，并将图像和文件名发送到节点js。但是当我试图使用req.body.fileName时，我得到了未定义。这样做的正确方法是什么，所以我可以将文件名和图像文件一起传递？

谢谢。

Answer 1

我认为您在提交表单时不会传递必填字段。尝试更改：

html view ：

<input type="text" name="fileName" id="image-name" ng-model="filename" required/>

控制器代码：

data:{file:file, filename: $scope.filename}

服务器端：

app.post('/imageUpload',function(req, res) {
    upload(req,res,function(err){
        console.log(req.body.filename);
        if(err){
             res.json({error_code:1,err_desc:err});
             return;
        }
         res.json({error_code:0,err_desc:null});
    })    
});

Answer 2

我解决了我的问题。

Upload.upload({
            url: 'http://127.0.0.1:8080/imageUpload',//webAPI exposed to upload the file
            fields: {
                newFileName: $scope.fileName
            },
            file: file
            //data:{file:file} //pass file as data, should be user ng-model
        })

我添加的字段让我可以访问req.body.newFileName。

谢谢大家的帮助！

在节点JS中使用multer更改文件名

2 个答案: