Загрузите несколько файлов с данными динамической формы, привязанными к каждому файлу, используя multer, ng-file-upload, angular и node

Я использую angular и ng-file-upload на стороне клиента. Я использую node, express и multer на стороне сервера.

Когда пользователь выбирает несколько файлов, я показываю предварительный просмотр файлов вместе с текстовым полем, привязанным к модели. Цель текстовой области - предоставить пользователю возможность дать каждому загруженному файлу примечание / описание.

Когда я вызываю функцию загрузки ng-file-upload и передаю модель файлов, я вижу, что данные динамической формы, специфичные для каждого файла, присутствуют в загружаемом массиве.

На стороне сервера я использую мультер. Кажется, все работает нормально. Я могу загрузить несколько файлов, однако данные динамической формы недоступны для встроенного в 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
                });
            }
        });

person Matthew Moran    schedule 29.03.2016    source источник
comment
Мое решение состояло в том, чтобы создать полностью отдельные объекты со всеми данными, которые мне нужны, а затем сохранить данные в одном запросе. Либо multer, либо ng-file-upload преобразовывали мой массив объектов, которые я создал на стороне клиента, в один объект с массивами для каждого значения поля. Поэтому мне также пришлось структурировать свой объект на клиенте и анализировать его на сервере. Я не уверен, что это был лучший способ добиться того, чего я хотел.   -  person Matthew Moran    schedule 30.03.2016


Ответы (1)


Я застрял в том же сценарии, когда мне нужно было отправить несколько файлов с их именами и размером. Вы можете использовать функцию закрытия, которая может действовать как посредник, у которого есть доступ как к глобальной, так и к локальной переменной, а также к непосредственным локальным переменным.

person Niraj Bankar    schedule 18.08.2018
comment
Я не уверен, как это отвечает на вопрос или связано с вопросом. - person Matthew Moran; 19.08.2018