Опубликовать Angular данные формы для Node.js с помощью Sendgrid/Nodemailer

Я следил за этим примером, чтобы отправить данные из моего приложения Angular в Node.js, чтобы отправить веб-форму в Sendgrid. Это отлично работает после некоторых изменений и очень много спасибо за быстрый запуск. Теперь отправьте мои данные формы в Sendgrid!

Для этого проекта я использую Angular Fullstack, чтобы иметь возможность использовать функции Node в моем приложении Angular.

Однако этот пример имеет только поля ввода и текстовую область. Я хочу иметь возможность добавлять файл (PDF, Docx, например), чтобы люди могли отправлять вложение получателю через Sendgrid. Я искал решение, но не смог найти рабочий пример. Возможно, потому что это невозможно, чего я хочу достичь.

Ответы

Ответ 1

1. Загрузка файла с формой в angular

Первая проблема заключается в том, что ng-model не работает с <input type="file" />. Таким образом, вам нужно будет создать настраиваемую директиву для заполнения модели файлом.

.directive('fileModel', ['$parse', function ($parse) {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            var model = $parse(attrs.fileModel);
            var modelSetter = model.assign;

            element.bind('change', function(){
                scope.$apply(function(){
                    modelSetter(scope, element[0].files[0]);
                });
            });
        }
    };
}]);

Затем используйте директиву в элементе ввода файла следующим образом:

<input type="file" file-model="email.attachment" ng-required="true" id="email-attachment" name="attachment" class="form-control" />

Обратите внимание, что я изменил email.file на email.attachment, чтобы избежать путаницы в остальной части кода.

Затем вам нужно включить файл в свой запрос AJAX. Для этого вам нужно будет использовать FormData. Заполните его с помощью FormData.append():

$scope.submitEmail = function() {
    var formData = new FormData();
    Object.keys($scope.email).forEach(function(key) {
        formData.append(key, $scope.email[key]);
    });
    $http.post('/api/email', formData, {
        transformRequest: angular.identity,
        headers: {'Content-Type': undefined}
    }).then(function(data, status) {
        console.log("Sent ok");
    }, function(data, status) {
        console.log("Error");
    });
};

Примечание. Я также передал объект конфигурации $http.post(). Это делается для предотвращения angular от анализа объекта FormData и установки типа содержимого.

Я полагался на этот пост в блоге для этой части ответа.

2. Отправка приложения с помощью Nodemailer

Чтобы получить доступ к файлу в экспресс, используйте multer.

Установка:

$ npm install --save multer

Использование:

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

app.post('/api/email', upload.single('attachment'), function(req, res) {
    // req.file contains the 'attachment' file
    ...
});

Из Раздел Readme для Nodemailer по полям электронной почты он говорит, что использует свойство attachments, которое представляет собой массив attachment объектов.

app.post('/api/email', upload.single('attachment'), function(req, res) {
    var mailOptions = {
        to: ['[email protected]', req.body.to],
        from: req.body.from,
        subject: req.body.subject,
        text: req.body.text,
        attachments: [
            {
                filename: req.file.originalname,
                content: req.file.buffer
            }
        ]
    };

    mailer.sendMail(mailOptions, function(err, res) {
        if (err) { 
            console.log(err) 
        }
        console.log(res);
    });
});

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

var upload = multer({ dest: '/uploads' });

Затем вместо того, чтобы устанавливать файл buffer в качестве вложения content, вы должны установить вложение path в файл path:

attachments: [
    {
        filename: req.file.originalname,
        path: req.file.path
    }
]

Ответ 2

Наконец-то я получил работу благодаря gilly3. Мне пришлось сделать одно небольшое изменение в его коде. В контроллере я изменил:

formData.set(key, $scope.email[key]);

к следующему коду:

formData.append(key, $scope.email[key]);