Угловой/NodeJS: невозможно загрузить изображение в AWS

Question

У меня есть приложение Node/Express и попытка получить информацию о файлах для загрузки с углового/ионного интерфейса. Я создал отдельную услугу на угловом, чтобы получить название изображения, которое работает. Моя реальная проблема - получить сам файл и загрузить его на сервер из 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'); 
} 
}) 

Answer 1

Это большое и простое решение для загрузки файлов на сервер или непосредственно из браузера S3 , В более позднем случае вы можете использовать свой сервер для передачи токенов, которые вы запрашиваете у AWS, своему пользователю, чтобы предоставить им временные привилегии для загрузки.

http://fineuploader.com/

Вы можете быстро интегрировать интерфейс в свой сайт или создать пользовательский интерфейс. Он мощный и имеет множество встроенных функций, а также хорошую документацию. Используя функцию Amazon S3 для загрузки непосредственно из браузера, вы удаляете множество накладных расходов с сервера, обрабатывая файлы во время загрузки.

Answer 2

Я использую возможность загрузки изображения в AWS с помощью REST API просмотр кода в стороне сервера view

и на стороне клиента вид show client side