使用ng-file-upload时获取表单数据

时间:2017-01-20 21:35:29

标签: javascript angularjs ng-file-upload

我正在使用ng-file-upload使用MEAN堆栈上传图像及其标题。目前我可以保存图像,但我无法获取发送的数据。

控制器:

module.exports = function ($scope, Upload) {
    let vm = this;

    vm.uploadImage = function () {
        if (vm.file) {
            vm.file.upload = Upload.upload({
                url: '/uploads/gallery',
                method: 'POST',
                data: { title: vm.title },
                file: vm.file
            });

            vm.file.upload.then(function (response) {
                $timeout(function () {
                    vm.file.result = response.data;
                });
            }, function (response) {
                if (response.status > 0) { }
                vm.errorMsg = response.status + ': ' + response.data;
            }, function (evt) {
                vm.file.progress = Math.min(100, parseInt(100.0 *
                    evt.loaded / evt.total));
            });
        }
    }

    vm.browseImage = function (file, errFiles) {
        vm.file = file;
        vm.errFile = errFiles && errFiles[0];
    }
}

路线:

router.post('/gallery', (req, res) => {
    //multers disk storage settings
    let folder = './public/assets/images/gallery/';
    let filename = '';

    let imageLocation = '';
    let thumbLocation = '';

    let response = '';

    //console.log(req.form);------throws undefined
    //console.log(req.body);------throws undefined

    let storage = multer.diskStorage({
        destination: function (req, file, cb) {
            cb(null, folder)
        },
        filename: function (req, file, cb) {
            var datetimestamp = Date.now();
            filename = file.fieldname + '-' + datetimestamp + '.' + file.originalname.split('.')[file.originalname.split('.').length - 1];
            imageLocation = folder + filename;
            thumbLocation = folder + 'thumb' + filename;
            cb(null, filename)
        }
    });

    //multer settings

    let upload = multer({
        storage: storage
    }).single('file');

    upload(req, res, function (err) {
        if (err) {
            res.json({ error_code: 1, err_desc: err });
            return;
        }
        else {
            response = { fileCreated: true };
        }
    })

});

module.exports = router;

如何在路线中获取表格中的字符串?

1 个答案:

答案 0 :(得分:0)

upload.single(...)是一个快速请求处理程序。多个请求处理程序可以与路由器匹配器一起使用,例如' router.post'函数在你的代码中。

因此,不像以前那样只有一个请求处理程序,而是如下:

router.post('/gallery', (req, res) => {
...
...
}

您可以像这样重写路由器:

router.post('/gallery', upload.single('file'), (req, res) => {
   ...
   ...
}

..您使用多个请求处理程序。

为了确定这一点,您应该在初始路由器匹配器之外定义multer实例,并且您的文件最终应该如下所示:

//i assume you have these in your file
const express = require("express");
const multer = require("multer");
let router = express.Router();

//multers disk storage settings
const folder = './public/assets/images/gallery/';
const filename = '';
const imageLocation = '';
const thumbLocation = '';

const storage = multer.diskStorage({
    destination: function (req, file, cb) {
        cb(null, folder)
    },
    filename: function (req, file, cb) {
        var datetimestamp = Date.now();
        this.filename = file.fieldname + '-' + datetimestamp + '.' + file.originalname.split('.')[file.originalname.split('.').length - 1];
        this.imageLocation = folder + filename;
        this.thumbLocation = folder + 'thumb' + filename;
        cb(null, filename)
    }
});

//multer settings
const upload = multer({
    storage: storage
});

router.post('/gallery', upload.single(), (req, res) => {
    console.log(res.json);
});

module.exports = router;