Angular/NodeJS：无法将图像上传到 AWS答案

【问题标题】：Angular/NodeJS: Unable to upload image to AWSAngular/NodeJS：无法将图像上传到 AWS
【发布时间】：2016-05-29 22:56:57
【问题描述】：

我有一个 Node/Express 应用程序并尝试从 Angular/Ionic 前端检索文件信息以进行上传。我在 Angular 上创建了一个单独的服务来获取有效的图像名称。我真正的问题是获取文件本身并将其从 Angular 上传到服务器。如何从 Angular 前端获取要上传的图像文件？

下面是我的代码：

<div class="item-input"> 
 <!--list item-->  
 <div data-ng-repeat="user in users"> 

    Username: <input type="text" placeholder="Enter the event name" name="username" ng-model="user.username" required> 

    Password: <input type="password" placeholder="Enter the password" name="password" ng-model="user.password" required> 

    <!--more items that I will omit from this--> 
    Profile Image: 
    <div ng-if="user.imageurl">
       {{ user.imageurl }}
       <button class="button button-block button-positive" ng-click="removepropic()">Remove Image
       </button>d
      <div ng-repeat="step in stepsModel">
         <img class="thumb" ng-src="{{ step }}" style="width:100px; height:100px" />
      </div>

      <input type="file" ng-model-instant onchange="angular.element(this).scope().imageUpload(this)" /> 
    </div> 

    <button class="button button-block button-positive" ng-click="editprofile(user)">
     Edit Account
    </button>

    <button class="button button-block button-positive" ng-click="deleteprofile()">
     Delete Account
    </button>

 </div>

控制器 JS 文件

.controller('ProfileUpdateCtrl', function($http, $state, $http, $cordovaOauth, $stateParams, $rootScope, $scope, UserFac, UploadFac) {  

id = $stateParams.id;    

$scope.user = {}; 

UserFac.getUser(id).success(function(data) {  
   $scope.users = data; 
}); 

$scope.editprofile = function(user) {  

   username = user.username;  
   password = user.password; 
   firstname = user.firstname; 
   lastname = user.lastname; 
   birthday = user.birthday;
   hometown = user.hometown;  
   email = user.email;   


   mark = { hometown: hometown, username: username, password:password, email:email, firstname:firstname, lastname:lastname,birthday:birthday }; 

   setmark = angular.toJson(mark);   

   UserFac.updateUser(id, setmark); 

   //reload to current controller 
   $state.reload({'reload':true});


}

//Remove Profile Image from Database. 
$scope.removepropic = function(user) { 

  blank = []; 

  mark = { imageurl:blank }; 
  setmark = angular.toJson(mark); 
  UserFac.updateUser(id, setmark);  
}

//Image Uploading 
$scope.stepsModel = [];

$scope.imageUpload = function(element) { 

    var reader = new FileReader();
    reader.readAsDataURL(element.files[0]);  

    file = element.files[0]; 

    mark = { imageurl:element.files[0].name }; 
    setmark = angular.toJson(mark); 

    //upload image to AWS 
    UploadFac.sendImg(file); 

    //send information to database
    UserFac.updateUser(id, setmark); 

    console.log(element.files[0]);   
}

//Terminate Profile
$scope.deleteprofile = function() { 
   UserFac.deleteUser(id); 
   $state.go('home'); 
}
})

【问题讨论】：

标签： javascript angularjs node.js amazon-web-services input

【解决方案1】：

这是将文件上传到服务器或直接从浏览器上传到 S3 的绝佳而简单的解决方案。在后一种情况下，您可以使用您的服务器将您从 AWS 请求的令牌传递给您的用户，以授予他们临时上传权限。

http://fineuploader.com/

您可以将他们的 UI 快速集成到您的网站中，或创建自定义 UI。它功能强大，具有许多内置功能以及良好的文档。通过使用 Amazon S3 功能直接从浏览器上传，您可以消除服务器在上传期间处理文件的大量开销。

【讨论】：

【解决方案2】：

我正在使用 REST API 在 AWS 中使用图片上传查看服务器端的代码 view

和客户端视图show client side

【讨论】：