使用angular-file-upload將文件上傳到節點服務器

對於我的英文很抱歉。我使用MEAN棧來寫我的應用程序。我找到了一些上傳圖像和角度文件上傳的模塊是我的選擇。但是當我上傳圖像時，控制檯上的百分比顯示已完成。我正在查看上傳目錄。該文件已上傳，但無法在Image Viever中讀取。使用angular-file-upload將文件上傳到節點服務器

這裏我的代碼對角：

 $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'); 

        }); 
       }

我想我做了什麼錯節點，但我不能找到它。請告訴我我的錯誤。

來源

2014-02-20 user3332388

http://stackoverflow.com/questions/22877613/angular-node - 高速 - 大圖像上載問題/ 23543687＃23543687 –

您需要將上傳圖像的預覽網址發送回角度。

在服務器端

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 
     }) 
});

客戶端

$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" >

來源

2014-05-30 05:02:32 ashu

使用angular-file-upload將文件上傳到節點服務器

回答

相關問題