Angular/NodeJS:无法将图像上传到 AWS

Angular/NodeJS: Unable to upload image to AWS

本文关键字:图像 AWS NodeJS Angular      更新时间:2023-09-26

我有一个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'); 
}
})

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

http://fineuploader.com/

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

我正在使用 REST APIAWS 中使用图像上传 查看服务器端视图中的代码

和客户端视图显示客户端