Загрузка изображений NodeJS и Angular

Перепробовал множество доступных в Интернете учебных пособий, но я все еще не могу заставить его работать. Я использую модуль multer в NodeJS и ng-file-upload в AngularJS. Сделал два хелпера с настройками мультера(потому что у меня два сценария и обе загрузки должны идти в разные папки). Бэкенд-файлы находятся в папке APP/APP_BACK/, поэтому в пути назначения я возвращаюсь на одну папку и ввожу APP_FRONT/images/header. Вот один вспомогательный фрагмент (/helpers/uploadHeader.js):

var storage = multer.diskStorage({
destination: function (req, file, callback) {
    callback(null, '../APP_FRONT/images/header/');
},
filename: function (req, file, callback) {  
    var ext = filename.slice((filename.lastIndexOf(".") - 1 >>> 0) + 2);
    callback(null, file.fieldname + '-' + '.' + ext);
}

});
var upload = multer(
    {storage: storage}
);

var helper = {
    upload: upload
};

module.exports = helper;

Вот файл роутера:

var headerHelper= require('../helpers/uploadHeader');

router.post('/header', headerHelper.upload.single('header'), function(req, res, next) {
   headerHelper.upload(req, res, function(err){
       if(err){
           res.status(400).send(err);
           console.log(err);
           return;
       }
       res.status(200).send({ code:200, message:'Header upload successful!'    });
   });
});

«заголовок» будет именем формы ввода или значением ключа в Postman.

В Angular я внедрил модуль «ngFileUpload» в приложение и внедрил службу «Загрузить» в нужный контроллер и использовал его внутри функции uploadHeader(), которая привязана к кнопке внутри формы на стороне клиента:

$scope.uploadHeader = function (file) {
        Upload.upload({
            url: 'http://localhost:3003/upload/header',
            method: 'POST',
            file: file
        }).then(function (response) {
            console.log('Success ' + response.config.data.file.name + 'uploaded. Response: ' + response.data);
        }, function (error) {
            console.log('Error status: ' + error.status);
        }, function (evt) {
            var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
            console.log('progress: ' + progressPercentage + '% ' + evt.config.data.file.name);
        });

Я пробовал с Почтальоном:

Почтовый запрос SS

И получить эту ошибку:

"Ошибка: ENOENT: нет такого файла или каталога, откройте 'c:\Users\Имя пользователя\Desktop\APP\APP_FRONT\images\header\header.jpg'"

Когда я пытаюсь со стороны клиента, я получаю следующие ошибки:

"Ошибка: неожиданное поле
в makeError" и "TypeError: dbg is undefined"

Я уже консультировался с Google, пробовал некоторые учебники, но застрял на этом.


node.js angularjs multer ng-file-upload
person Community    schedule 05.01.2017    source источник
comment
TypeError: dbg is undefined — это ошибка Mozilla Firebug.   -  person AlainIb    schedule 06.01.2017
comment
не могли бы вы предоставить свой html код? Я считаю, что в этом и заключается ошибка. Вы уверены, что значение атрибута name равно header?   -  person Shimon Brandsdorfer    schedule 06.01.2017

Ответы (2)


arrow_upward
1
arrow_downward

В вашем маршрутизаторе вы указываете multer искать объект под названием «заголовок» в данных формы mulitpart. Ваш код angularJS добавляет его как объект с именем «файл».

Если вы измените строку в своем маршрутизаторе с:

router.post('/header', headerHelper.upload.single(**'header'**), function(req, res, next) {
//.....
    }

to:

router.post('/header', headerHelper.upload.single(**'file'**), function(req, res, next) {
//....
}

Это должно сработать.

person CvZ    schedule 05.01.2017

arrow_upward
1
arrow_downward

РЕДАКТИРОВАТЬ: решение найдено

На самом деле проблема была в функции имени файла в настройках хранилища мультера. В сообщении выше я добавил метку даты и времени и расширение файла к имени поля:

filename: function (req, file, callback) {
    var datetimestamp = moment().format('DD-MM-YY_HH:mm:ss');
    var filename = file.originalname;
    var ext = filename.slice((filename.lastIndexOf(".") - 1 >>> 0) + 2);

    callback(null, file.fieldname + '-' + datetimestamp + '.' + ext);
}

По какой-то причине он не смог завершить загрузку, и я получил ошибку.

Я изменил функцию имени файла, чтобы возвращать только исходное имя файла:

filename: function (req, file, callback) {
        callback(null, file.originalname);
    }

и теперь все в порядке. Но теперь вопрос в том, почему пользовательское имя файла не работает?

person Community    schedule 06.01.2017