用AngularJS和NodeJS發送圖像

Question

嗨我正在提供一項服務來發送帶有用戶信息的圖像。例如，名稱，電話號碼和要上傳的圖像。

我打算使用ng-file-upload，AngularJS自定義依賴項之一。然後，我將使用Nodemailer將所有信息和圖像發送到其他地方。

但我的問題是我可以發送其他文本數據以及ng-file-upload嗎？第二是我可以通過nodemailer發送帶有其他文本數據的圖像嗎？

Answer 1

儘管OP最終找到了一個解決方案，但由於我遇到了同樣的問題，我想我會將整個代碼發佈給其他可能與此相關的人員。

因此，這裏是我如何組合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鍵。

Answer 2

當然，您可以使用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完全看明白所有的事情，你可以隨文件上傳一起完成。它有很多例子讓你明白一切。

我希望它有幫助，並回答你的問題。