Отправка изображений с помощью 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 полностью, чтобы увидеть понять все вещи, которые вы можетеделать вместе с загрузкой файлов. У него много примеров, чтобы вы все поняли.

Надеюсь, это поможет и ответит на ваш вопрос.