angularjs - 使用 multer、ng-file-upload、Angular 和 Node 上传多个文件，并将动态表单数据绑定(bind)到每个文件

Question

我在客户端使用 Angular 和 ng-file-upload。我在服务器端使用 node、express 和 multer。

当用户选择多个文件时，我会显示文件的预览以及绑定(bind)到模型的文本区域。文本区域的目的是让用户能够为每个上传的文件提供注释/描述。

当我调用 ng-file-upload 的上传函数并传入文件模型时，我看到特定于每个文件的动态表单数据存在于正在上传的数组中。

在服务器端我使用 multer。一切似乎都运转正常。我可以上传多个文件，但是动态表单数据在 multer 的内置 req.files 对象上不可用，并且我不知道在哪里可以访问动态数据。

我已经搜索了请求对象，但找不到我要查找的数据。

如何将动态数据单独添加到每个文件并将其传递到服务器并访问它？

客户端

$scope.uploadFiles = function(files) {
     console.log('files', files); //I see that this argument contains the user input as property ‘Desc’
    if (files && files.length) {
        Upload.upload({
            url: 'api/filesinorg/upload/'+ $rootScope.currentUser.primary_org_id,
            arrayKey: '', // default is '[i]'
            data: {
                files: files,
                fileData: {
                    Organization_id: $rootScope.currentUser.primary_org_id,
                    uploadBy_id: $rootScope.currentUser._id
                }
            }
        })
        .then(function (result) {
            $timeout(function () {
                $scope.filesSelected = [];
                $scope.uploadedFiles.push(result.data.files);
            });
        }, function (result) {
            if (result.status > 0) {
                $scope.errorMsg = result.status + ': ' + result.data;
            }
        }, function (evt) {
            $scope.progress = Math.min(100, parseInt(100.0 * evt.loaded / evt.total));
        });
    }
};

服务器

var multer  = require('multer');
var uploadPath = '';

var storage = multer.diskStorage({
    destination: function (req, file, cb) {
        cb(null, 'uploads/'+ req.params.orgId + '/')
    },
    filename: function (req, file, cb) {
        cb(null, file.originalname);
    }
});

var upload = multer({ storage: storage });
var uploadRoot = 'uploads/';
function checkUploadPath(req, res, next) {
    var orgId = req.params.orgId;
    uploadPath =uploadRoot + orgId + '/';
    fs.stat(uploadPath, function(err, stats) {
        if(err) {
            console.log('Error', err);
            fs.mkdir(uploadPath, function(err) {
                if(err) {
                    console.log('Error in folder creation');
                    next();
                }
                next();
            });
        }
        else {
            next();
        }
    });
}



var type = upload.array('files');
    router.use('/filesinorg/upload/:orgId', checkUploadPath, type);
    router.route('/filesinorg/upload/:orgId')
        .post(function(req, res) {

            var orgId = req.params.orgId;
            var filesUploaded = req.files;
            var fileData = req.body.fileData;
            var isError = false;
            var filesSaved = [];

            filesUploaded.forEach(function(file) {
                console.log('file', file);
                console.log('file.Desc', file.Desc);
                var newFile = new File();
                newFile.fileName = file.originalname;
                newFile.serverPath = file.path;
                newFile.shortDesc = file.Desc.slice(0,20);
                newFile.Desc = file.Desc;
                newFile.upload_dt = Date.now();
                newFile.uploadBy_id = fileData.uploadBy_id;
                newFile.Organization_id = fileData.Organization_id;
                newFile.type = file.mimetype;

                file.save(function(err, savedFile) {
                    if (err) {
                        return isError = true;
                    }

                    filesSaved.push(newFile);
                    console.log('File Saved success fully');
                });
            });

            if(isError) {
                res.status(500).send({
                    success: false,
                    msg: 'Error Saving File',
                    file: null
                })
            } else {
                res.status(200).send({
                    success: true,
                    msg: 'Saved Contact',
                    files: filesSaved
                });
            }
        });

Answer 1

我陷入了同样的场景，我需要发送多个文件及其名称和大小。您可以使用 Use 闭包函数，它可以充当可以访问全局变量和局部变量以及直接局部变量的中间人。