Загрузите файл на сервер узла с угловым файлом-upload

Question

Прошу прощения за мой английский. Я использую стек MEAN для написания своего приложения. Я узнаю, что некоторые модули для загрузки изображения и загрузки углового файла - это мой выбор. Но когда я загружаю изображение, процентное шоу на консоли завершено. Я проверяю каталог загрузки. Файл загружается, но не читается в Image Viever.

Вот мой код на угловой:

 $scope.onFileSelect = function($files) {  
      for (var i = 0; i < $files.length; i++) { 
       var file = $files[i]; 
       $scope.upload = $upload.upload({ 
        url: '/posts/upload/', 
        method: 'POST',     
        file: file, 
       }).progress(function(evt) { 
        console.log('percent: ' + parseInt(100.0 * evt.loaded/evt.total)); 
       }).success(function(data, status, headers, config) { 
        // file is uploaded successfully 
        console.log(data); 
       }); 

      } 
     }; 

Вот мой код на узле JS:

  exports.upload = function(req, res) {  
         var data = new Buffer(''); 
          req.on('data', function(chunk) { 
          data = Buffer.concat([data, chunk]); 
         }); 
         req.on('end', function() { 
           req.rawBody = data;  
           fs.writeFile(config.root + path.sep + 'public/upload' +     path.sep + uuid.v1(), data ,function(err){ 
          if(err) throw err; 
           console.log('ok saved') 

         }); 
         res.send('ok'); 

        }); 
       } 

Я предполагаю, что я делаю что-то неправильно с узлом, но я не могу найти его. Пожалуйста, скажите мне, что моя ошибка.

Answer 1

Необходимо отправить URL предварительного просмотра для загруженного изображения обратно в угловое.

На стороне сервера

req.on('end', function() { 
    req.rawBody = data; 
    var imgUrl = '/upload' + path.sep + uuid.v1(); 

    fs.writeFile(config.root + path.sep + 'public' + imgUrl, data ,function(err){ 
     if(err) throw err; 

     //send back the preview url 
     res.jsonp({ 
      imgUrl: imgUrl 
     }) 
}); 

Client Side

$scope.onFileSelect = function($files) {  
     for (var i = 0; i < $files.length; i++) { 
      var file = $files[i]; 
      $scope.upload = $upload.upload({ 
       url: '/posts/upload/', 
       method: 'POST',     
       file: file, 
      }).progress(function(evt) { 
       console.log('percent: ' + parseInt(100.0 * evt.loaded/evt.total)); 
      }).success(function(data, status, headers, config) { 
       // file is uploaded successfully 
       console.log(data); 
       $scope.imgurl = data.imgUrl; 
      }); 

     } 
    }; 

Вы можете отобразить изображение, как этот

<img ng-src="{{imgurl}}" ng-show="imgurl" alt="preview for uploaded image" >