Ein Bild hinzufügen, um der MEAN.JS Beispiel mit Winkel-Datei-upload

Meine Lösung verwendet Winkel-Datei-upload auf dem client und verwendet verbinden-mit mehreren Teilnehmern zum behandeln der file-upload.

Dem die Bilder gespeichert werden direkt in der Datenbank, die Grenzen Ihrer Größe. Ich habe nicht enthalten die erforderlichen code, um zu überprüfen, der Größe des Bildes.

eingerichtet

 bower install ng-file-upload --save
 bower install ng-file-upload-shim --save 

 npm i connect-multiparty
 npm update

all.js
fügen Sie eckige-file-upload-scripts

            ...
            'public/lib/ng-file-upload/FileAPI.min.js', 
            'public/lib/ng-file-upload/angular-file-upload-shim.min.js',
            'public/lib/angular/angular.js', 
            'public/lib/ng-file-upload/angular-file-upload.min.js',
            ...

config.js
Spritzen Winkel-Datei-upload Abhängigkeit

...
var applicationModuleVendorDependencies = ['ngResource', 'ngAnimate', 'ui.router', 'ui.bootstrap', 'ui.utils', 'angularFileUpload'];
...

article.client.controller.js
Verwenden Sie eckige-Datei-upload Abhängigkeit

angular.module('articles').controller('ArticlesController', ['$scope', '$timeout',  '$upload', '$stateParams', '$location', 'Authentication', 'Articles',
function($scope, $timeout, $upload, $stateParams, $location, Authentication, Articles) {
    $scope.fileReaderSupported = window.FileReader !== null;



    //Create new Article
            $scope.create = function(picFile) {
          console.log('create');
                      console.log(picFile);
        var article = new Articles({
            title: this.title,
            content: this.content,
            image: null
        });

         console.log(article);
         $upload.upload({
            url: '/articleupload', 
            method: 'POST', 
            headers: {'Content-Type': 'multipart/form-data'},
            fields: {article: article},
            file: picFile,               
        }).success(function (response, status) {
              $location.path('articles/' + response._id);

            $scope.title = '';
            $scope.content = '';
        }).error(function (err) {
                $scope.error = err.data.message;
        });

    };

    $scope.doTimeout = function(file) {
         console.log('do timeout');
        $timeout( function() {
                var fileReader = new FileReader();
                fileReader.readAsDataURL(file);
             console.log('read');
                fileReader.onload = function(e) {
                    $timeout(function() {
                        file.dataUrl = e.target.result;
                         console.log('set url');
                    });
                };
            });
    };


    $scope.generateThumb = function(file) {
        console.log('generate Thumb');
    if (file) {
        console.log('not null');
         console.log(file);
        if ($scope.fileReaderSupported && file.type.indexOf('image') > -1) {
            $scope.doTimeout(file);
          }
      }
   };
}

create-article.client.view.html
aktualisieren Sie die Ansicht erstellen zu handhaben Dateiauswahl und upload

<section data-ng-controller="ArticlesController">
<div class="page-header">
    <h1>New Article</h1>
</div>
<div class="col-md-12">
    <form name="articleForm" class="form-horizontal" data-ng-submit="create(picFile)" novalidate>
        <fieldset>
            <div class="form-group" ng-class="{ 'has-error':   articleForm.title.$dirty && articleForm.title.$invalid }">
                <label class="control-label" for="title">Title</label>
                <div class="controls">
                    <input name="title" type="text" data-ng-model="title" id="title" class="form-control" placeholder="Title" required>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label" for="content">Content</label>
                <div class="controls">
                    <textarea name="content" data-ng-model="content" id="content" class="form-control" cols="30" rows="10" placeholder="Content"></textarea>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label" for="articleimage">Article Picture</label>
                <div class="controls">
                     <input id="articleimage" type="file" ng-file-select="" ng-model="picFile" name="file" accept="image/*" ng-file-change="generateThumb(picFile[0], $files)" required="">
                    <br/>
                    <img ng-show="picFile[0].dataUrl != null" ng-src="{{picFile[0].dataUrl}}" class="img-thumbnail" height="50" width="100">
                    <span class="progress" ng-show="picFile[0].progress >= 0">      
                        <div style="width:{{picFile[0].progress}}%" ng-bind="picFile[0].progress + '%'" class="ng-binding"></div>
                    </span> 
                    <span ng-show="picFile[0].result">Upload Successful</span>
                </div>
            </div>
            <div class="form-group">
                <input type="submit" class="btn btn-default" ng-disabled="!articleForm.$valid" ng-click="uploadPic(picFile)">
            </div> 
            <div data-ng-show="error" class="text-danger">
                <strong data-ng-bind="error"></strong>
            </div>
        </fieldset>
    </form>
</div>
</section>

view-article.client.view.html
aktualisieren Sie die Listenansicht, um Bild

<img ng-src="data:image/jpeg;base64,{{article.image}}" id="photo-id" width="200" height="200"/>

list-articles.client.view.html
"Ansicht aktualisieren" zu gehören imgae

<img ng-src="data:image/jpeg;base64,{{article.image}}" id="photo-id" width="40" height="40"/>

article.server.model.js
Bild hinzufügen, um Datenbank-Modell

...
image: {
    type: String,
    default: ''
},
...

article.server.routes.js
Fügen Sie neue route für den upload verwenden Sie connect-die Mehrparteien -

...
multiparty = require('connect-multiparty'),
multipartyMiddleware = multiparty(),
...
app.route('/articleupload')
    .post(users.requiresLogin, multipartyMiddleware, articles.createWithUpload);
...

article.server.controller.js
Griff neue route für den upload benötigen, fs

...
fs = require('fs'),
...
/**
 * Create a article with Upload
 */
exports.createWithUpload = function(req, res) {
 var file = req.files.file;
 console.log(file.name);
 console.log(file.type);
 console.log(file.path);
 console.log(req.body.article);

var art = JSON.parse(req.body.article);
var article = new Article(art);
article.user = req.user;

fs.readFile(file.path, function (err,original_data) {
 if (err) {
      return res.status(400).send({
            message: errorHandler.getErrorMessage(err)
        });
  } 
    //save image in db as base64 encoded - this limits the image size
    //to there should be size checks here and in client
  var base64Image = original_data.toString('base64');
  fs.unlink(file.path, function (err) {
      if (err)
      { 
          console.log('failed to delete ' + file.path);
      }
      else{
        console.log('successfully deleted ' + file.path);
      }
  });
  article.image = base64Image;

  article.save(function(err) {
    if (err) {
        return res.status(400).send({
            message: errorHandler.getErrorMessage(err)
        });
    } else {
        res.json(article);
    }
  });
});
};
...

InformationsquelleAutor John Purnell

Meine funktionierende Lösung in MEAN.js

server-Modell:

image:{ 
    type: String, 
    default: ''
},

server-controller:

var item = new Item(JSON.parse(req.body.item));
item.user = req.user;
if(req.files.file)
    item.image=req.files.file.name;
else
    item.image='default.jpg';

//item.image=
item.save(function(err) {
    if (err) {
        return res.status(400).send({
            message: errorHandler.getErrorMessage(err)
        });
    } else {
        res.jsonp(item);
    }
});

server-route: (erfordert multer: "npm install multer --speichern")

var multer  = require('multer');
app.use(multer({ dest: './public/uploads/'}));

frontend angular controller:

    $scope.image='';

    $scope.uploadImage = function(e){
        console.log(e.target.files[0]);
        $scope.image=e.target.files[0];

    };



    //Create new Item
    $scope.create = function() {
        //Create new Item object
        var item = new Items ({
            name: this.name,
            bought: this.bought,
            number: this.number,
            description: this.description,
            warranty: this.warranty,
            notes: this.notes


        });

        ItemsService.saveItem(item,$scope.image);

    };

service, das senden der Anfrage:

.factory('ItemsService', ['$http','$rootScope', function($http, $rootScope) 
{
    var service={};

    service.saveItem = function(item, image)
    {

        var fd = new FormData();
        fd.append('file', image);
        fd.append('item', JSON.stringify(item));
        $http.post('items/', fd, {
            transformRequest: angular.identity,
            headers: {'Content-Type': undefined}
        })
        .success(function(){
            console.log('success add new item');
        })
        .error(function(e){
            console.log('error add new item', e);
        });


    };

    return service;

}

]);

html-Ansicht:

           <div class="form-group">
                <label class="control-label" for="name">Image</label>
                <div class="controls">
                    <input type="file"  data-ng-model="image" id="image" my-file-upload="uploadImage" required>
                     {{selectedFile.name}}
                </div>
            </div>

InformationsquelleAutor Mike