Javascript 使用Sendgrid/NodeEmailer将角度表单数据发布到Node.js
我随后将Angular应用程序中的数据发布到Node.js,并将网络表单发布到Sendgrid。在做了一些更改之后,这一切都很好,非常感谢您提供的快速入门。正在将我的表单数据发布到Sendgrid 对于这个项目,我使用的是能够在我的Angular应用程序中使用节点功能 但是,这个示例只有输入字段和文本区域。我希望能够添加一个文件(PDF、Docx等),以便人们可以通过Sendgrid向收件人发送附件。我已搜索解决方案,但找不到有效的示例。也许是因为我不可能实现我想要的 我的观点(客户):Javascript 使用Sendgrid/NodeEmailer将角度表单数据发布到Node.js,javascript,angularjs,node.js,sendgrid,nodemailer,Javascript,Angularjs,Node.js,Sendgrid,Nodemailer,我随后将Angular应用程序中的数据发布到Node.js,并将网络表单发布到Sendgrid。在做了一些更改之后,这一切都很好,非常感谢您提供的快速入门。正在将我的表单数据发布到Sendgrid 对于这个项目,我使用的是能够在我的Angular应用程序中使用节点功能 但是,这个示例只有输入字段和文本区域。我希望能够添加一个文件(PDF、Docx等),以便人们可以通过Sendgrid向收件人发送附件。我已搜索解决方案,但找不到有效的示例。也许是因为我不可能实现我想要的 我的观点(客户): <
<div ng-controller="ContactFormCtrl" id="contactformbox" style="margin-top:50px;" class="mainbox" >
<div class="panel panel-info" >
<div class="panel-heading">
<div class="panel-title">Solliciteer direct</div>
</div>
<div style="padding-top:30px" class="panel-body" >
<form id="loginform" class="form-horizontal" role="form" name="contactform">
<div style="margin-bottom: 25px" class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input type="email" name="to" ng-model="email.to" ng-required="true" id="email-to" class="form-control" name="username" value="" placeholder="The emailadres from the employer">
</div>
<div style="margin-bottom: 25px" class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
<input type="email" name="from" ng-model="email.from" ng-required="true" id="email-from" class="form-control" name="email-from" placeholder="Your e-mail address">
</div>
<div style="margin-bottom: 25px" class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
<input type="text" name="subject" ng-model="email.subject" ng-required="true" id="email-subject" class="form-control" name="subject" placeholder="Your subject please">
</div>
<div style="margin-bottom: 25px" class="input-group">
<input type="file" name="file" ng-model="email.file" ng-required="true" id="email-file" class="form-control" name="file">
</div>
<div style="margin-bottom: 25px" class="input-group">
<textarea ng-model="email.text" name="text" placeholder="Enter Text Here.." class="form-control" rows="5" id="comment"></textarea>
</div>
<div style="margin-top:10px" class="form-group">
<!-- Button -->
<div class="col-sm-12 controls">
<button id="emailSubmitBn" class="btn btn-success" type="submit" ng-click="submitEmail()">Submit</button>
</div>
</div>
</form>
</div>
</div>
angular.module('angularMyApp')
.controller('ContactFormCtrl', function ($scope, $http) {
$scope.submitEmail = function() {
console.log("TEST");
//Request
$http.post('/api/email', $scope.email)
.success(function(data, status) {
console.log("Sent ok");
})
.error(function(data, status) {
console.log("Error");
})
};
});
'use strict';
// Set default node environment to development
process.env.NODE_ENV = process.env.NODE_ENV || 'development';
var express = require('express');
var config = require('./config/environment');
var http = require('http');
var bodyParser = require('body-parser');
var options = {
auth: {
api_key: process.env.SENDGRID_APIKEY;
}
}
var nodemailer = require('nodemailer');
var sgTransport = require('nodemailer-sendgrid-transport');
// Setup server
var app = express();
var server = require('http').createServer(app);
require('./config/express')(app);
require('./routes')(app);
var mailer = nodemailer.createTransport(sgTransport(options));
app.post('/api/email', function(req, res) {
var mailOptions = {
to: ['test@test.nl', req.body.to],
from: req.body.from,
subject: req.body.subject,
text: req.body.text
};
mailer.sendMail(mailOptions, function(err, res) {
if (err) {
console.log(err)
}
console.log(res);
});
});
// Start server
server.listen(config.port, config.ip, function () {
console.log('Express server listening on %d, in %s mode', config.port, app.get('env'));
});
// Expose app
exports = module.exports = app;
我的APP.JS(服务器):
<div ng-controller="ContactFormCtrl" id="contactformbox" style="margin-top:50px;" class="mainbox" >
<div class="panel panel-info" >
<div class="panel-heading">
<div class="panel-title">Solliciteer direct</div>
</div>
<div style="padding-top:30px" class="panel-body" >
<form id="loginform" class="form-horizontal" role="form" name="contactform">
<div style="margin-bottom: 25px" class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input type="email" name="to" ng-model="email.to" ng-required="true" id="email-to" class="form-control" name="username" value="" placeholder="The emailadres from the employer">
</div>
<div style="margin-bottom: 25px" class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
<input type="email" name="from" ng-model="email.from" ng-required="true" id="email-from" class="form-control" name="email-from" placeholder="Your e-mail address">
</div>
<div style="margin-bottom: 25px" class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
<input type="text" name="subject" ng-model="email.subject" ng-required="true" id="email-subject" class="form-control" name="subject" placeholder="Your subject please">
</div>
<div style="margin-bottom: 25px" class="input-group">
<input type="file" name="file" ng-model="email.file" ng-required="true" id="email-file" class="form-control" name="file">
</div>
<div style="margin-bottom: 25px" class="input-group">
<textarea ng-model="email.text" name="text" placeholder="Enter Text Here.." class="form-control" rows="5" id="comment"></textarea>
</div>
<div style="margin-top:10px" class="form-group">
<!-- Button -->
<div class="col-sm-12 controls">
<button id="emailSubmitBn" class="btn btn-success" type="submit" ng-click="submitEmail()">Submit</button>
</div>
</div>
</form>
</div>
</div>
angular.module('angularMyApp')
.controller('ContactFormCtrl', function ($scope, $http) {
$scope.submitEmail = function() {
console.log("TEST");
//Request
$http.post('/api/email', $scope.email)
.success(function(data, status) {
console.log("Sent ok");
})
.error(function(data, status) {
console.log("Error");
})
};
});
'use strict';
// Set default node environment to development
process.env.NODE_ENV = process.env.NODE_ENV || 'development';
var express = require('express');
var config = require('./config/environment');
var http = require('http');
var bodyParser = require('body-parser');
var options = {
auth: {
api_key: process.env.SENDGRID_APIKEY;
}
}
var nodemailer = require('nodemailer');
var sgTransport = require('nodemailer-sendgrid-transport');
// Setup server
var app = express();
var server = require('http').createServer(app);
require('./config/express')(app);
require('./routes')(app);
var mailer = nodemailer.createTransport(sgTransport(options));
app.post('/api/email', function(req, res) {
var mailOptions = {
to: ['test@test.nl', req.body.to],
from: req.body.from,
subject: req.body.subject,
text: req.body.text
};
mailer.sendMail(mailOptions, function(err, res) {
if (err) {
console.log(err)
}
console.log(res);
});
});
// Start server
server.listen(config.port, config.ip, function () {
console.log('Express server listening on %d, in %s mode', config.port, app.get('env'));
});
// Expose app
exports = module.exports = app;
那么主要有两个问题:
ng model
不能与
一起使用。因此,您将需要创建一个自定义指令来用文件填充模型
.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" />
注意,我还向$http.post()
传递了一个配置对象。这是为了防止angular解析FormData
对象并设置内容类型
我在很大程度上依赖于答案的这一部分
2.使用nodeEmailer发送附件
要在express中访问文件,请使用
安装:
$ 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
...
});
它表示使用一个附件
属性,该属性是一个数组
上面的示例将附件保存在内存中,如果频繁上载大文件,则可能会出现问题。您可以改为将文件写入磁盘:
var upload = multer({ dest: '/uploads' });
然后,您可以将附件的路径
设置为文件的路径,而不是将文件的缓冲区
设置为附件的内容
:
attachments: [
{
filename: req.file.originalname,
path: req.file.path
}
]
多亏了吉莉,我终于完成了任务。我不得不对他的密码做一点小改动。在控制器中,我更改了:
formData.set(key, $scope.email[key]);
以下代码:
formData.append(key, $scope.email[key]);
同时,我在以下位置找到了一些信息:。但按照这个确切的例子,让我发布数据,但仍然有错误。server.js中的multer代码不起作用,因为multer有一个更新的库。具有“文件”属性的输入字段不能附加到ng模型。您必须为此使用自定义指令。这里有什么想法吗?代码中的一个小改动:formData.set(key$scope.email[key]);应该是:formData.append(key$scope.email[key]);查看文档,我发现浏览器支持不如FormData.set()
好。我将更新我的答案以使用.append()
@gilly3您可以使用ng资源并从控制器保存数据,然后使用已保存的承诺,然后触发文件上载。我说得对吗?