使用 AngularJS 和 NodeJS 发送图像

Question

您好，我正在提供一项服务，可以发送带有用户信息的图像。例如，姓名、phone 号码和要上传的图片。

我打算使用 ng-file-upload, one of AngularJS custom dependency. And then, I am going to use Nodemailer 将所有信息和图像发送到其他地方。

但我的问题是我可以将其他文本数据与 ng-file-upload 一起发送吗？其次是我可以通过 nodemailer 发送带有其他文本数据的图像吗？

Answer 1

您当然可以使用 nodemailer 将图像作为附件发送。

尝试将图像作为附件发送：

var mailOptions = {
    ...
    html: 'Embedded image: <img src="cid:unique@kreata.ee"/>',
    attachments: [{
        filename: 'image.png',
        path: '/path/to/file',
        cid: 'unique@kreata.ee' //same cid value as in the html img src
    }]
}

有关将图像作为附件发送的更多参考，请参阅 nodemailer's "using Embedded documentation"。

第一部分问题：

是的！您可以使用 ng-file-upload 将其他文本数据与图像一起发送。这取决于你想怎么做以及你想实现什么。

例如，见下面代码：

HTML 模板

<form name="form">
    <input type="text" ng-model="name" ng-required="true">
    <input type="text" ng-model="phoneNo" ng-required="true">
    <div class="button" ngf-select ng-model="file" name="file" ngf-pattern="'image/*'" ngf-accept="'image/*'" ngf-max-size="20MB" ngf-min-height="100" ngf-resize="{width: 100, height: 100}">Select</div>
    <button type="submit" ng-click="submit()">submit</button>
</form>

控制器

$scope.submit = function() {
  if ($scope.form.file.$valid && $scope.file) {
    $scope.upload($scope.file);
  }
};

// upload on file select or drop
$scope.upload = function (file) {
    Upload.upload({
        url: 'upload/url',
        data: {file: file, 'name': $scope.name, 'phoneNo' : $scope.phoneNo}
    }).then(function (resp) {
        console.log('Success ' + resp.config.data.file.name + 'uploaded. Response: ' + resp.data);
    }, function (resp) {
        console.log('Error status: ' + resp.status);
    }, function (evt) {
        var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
        console.log('progress: ' + progressPercentage + '% ' + evt.config.data.file.name);
    });
};

完整阅读 ng-file-upload documentation 以了解您可以在上传文件时执行的所有操作。它有很多例子让你明白一切。

希望对您有所帮助，并回答您的问题。

Answer 2

尽管 OP 最终找到了解决方案，但由于我遇到了同样的问题，我想我会 post 将整个代码放在这里供其他可能遇到此问题的人使用。

下面是我结合 ng-file-upload 和 nodemailer 使用 Gmail 通过电子邮件上传和发送附件的方法：

HTML形式：

<form name="postForm" ng-submit="postArt()">
...
<input type="file" ngf-select ng-model="picFile" name="file" ngf-max-size="20MB">
...
</form>

控制器：

app.controller('ArtCtrl', ['$scope', 'Upload', function ($scope, Upload) {
    $scope.postArt = function() {
        var file = $scope.picFile;
        console.log(file);
        file.upload = Upload.upload({
            url: '/api/newart/',
            data: {
                username: $scope.username,
                email: $scope.email,
                comment: $scope.comment,
                file: file
            }
        });
    }
}]);

服务器：

var nodemailer = require('nodemailer');
var multipartyMiddleware = require('connect-multiparty')();
// multiparty is required to be able to access req.body.files !

app.mailTransporter = nodemailer.createTransport({
    service: 'gmail',
    auth: {
        user: ...
        pass: ...
    },
    tls: { rejectUnauthorized: false } // needed or Gmail might block your mails
});

app.post('/api/newart', multipartyMiddleware,function(req,res){
    console.log(req.files);
    mailOptions = {
        from: req.body.email,
        to: ...,
        subject: ...
        text: ...,
        attachments: [{
            filename: req.files.file.name,
            path: req.files.file.path // 'path' will stream from the corresponding path
        }]
    };
    app.mailTransporter.sendMail(mailOptions, function(err) {
        if (err) {
            console.log(err);
            res.status(500).end();
        }
        console.log('Mail sent successfully');
        res.status(200).end()
    });
});

nodemailer examples 帮我解决了这个问题！

这适用于任何文件类型。有些人可能会错过的关键方面是您需要多方访问上传的文件（在 req.body.files 中）。那么最方便的附加方法是使用附件对象中的 path 键。

使用 AngularJS 和 NodeJS 发送图像

Sending images with AngularJS and NodeJS

image-uploading

nodemailer

ng-file-upload