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

【问题标题】：Getting form data while using ng-file-upload使用 ng-file-upload 获取表单数据
【发布时间】：2017-11-10 04:34:03
【问题描述】：

我正在使用 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;

如何在路由中获取表单中的字符串？

【问题讨论】：

标签： javascript angularjs ng-file-upload

【解决方案1】：

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;

【讨论】：