nicht in der Lage, Daten im Bereich mit Localstorage in eckigen

Question

persistent zu bleiben Ich benutze FileReader, um die Datei zu lesen und speichern Sie das Bild in localStorage und zeigen Sie es in der Ansicht.

Controller:

angular.module('App')controller('publsherProfileEditCtrl', ['$rootScope', '$scope', '$stateParams', '$location', '$http', 'Auth', '$state', 'toaster', '$timeout', '$localStorage', 'operationsFactory', 'userManagementFactory', '$q', function ($rootScope, $scope, $stateParams, $location, $http, Auth, $state, toaster, $timeout, $localStorage, operationsFactory, userManagementFactory, $q) { 

$scope.profilePicture = {}; 
var fd; 
$scope.onBGSelect = function ($files) { 
    var file = $files[0]; 
    if (!file) { 
     return; 
    } 
    if ((/\.(jpg|jpeg|png)$/i).test(file.name)) { 
     fd = new FormData(); 
     fd.append('content', file); 
     var reader = new FileReader(); 
     reader.onload = (function (theFile) { 
      return function (e) { 
       $scope.$apply(function() { 
        $localStorage.profilePicture = e.target.result; 
        $scope.profilePicture.content = $localStorage.profilePicture; 
       }); 
      }; 
     })(file); 
     reader.readAsDataURL(file); 
    } else { 
     toaster.pop('error', "File Extension", "Not allowed."); 
     $('input[name="bgimage"]').val(""); 
    } 
}; 
}]); 

Daten an den Server schieben Fabrik mit:

$scope.publisherProfileEdit = function() { 
if ($scope.profilePicture.content) { 
    var track = []; 
    for (var keys in $scope.profilePicture) { 
     fd.append(keys, $scope.profilePicture[keys]); 
    } 
    track.push(operationsFactory.changeProfilePicture(fd)); 
    $scope.myPromise = $q.all(track).then(function (result) { 
     $localStorage.profile_picture = result[0].data.profile_picture; 
     console.log('success upload') 
     toaster.pop('success', 'Changed Successfully'); 
     userManagementFactory.userProfile($localStorage.userId).success(function (response) { 
      $localStorage.presentUser = response.result; 
      $scope.presentUser = $localStorage.presentUser; 
      $localStorage.profilePic = $scope.presentUser.profile_picture; 
      $scope.profilePic = $localStorage.profilePic; 
     }).error(function (error) { 
      console.log('error' + error); 
     }); 
    }, function (error) { 
     console.log('error', error) 
    }); 
}; 

Factory:

angular.module('App').factory('userManagementFactory', function ($http) { 
    var BASEURI = 'https://www.crmmgolbale.profile/user/'; 
    var userProfile = function (data) { 
     return $http({ 
      method: 'GET', 
      url: BASEURI + data + '/compact', 
      data: data 
     }); 
    }; 
    return{ 
     userProfile: userProfile 
    }; 
}); 

Ansicht Html:

<div> 
    <img ng-src="{{profilePic}}"> 
     <!-- <div ng-if="profilePicture.content"> 
      <img ng-src="{{profilePicture.content}}"/> 
     </div>--> 
    <input type="file" name="bgimage" ng-file-select ng-file-change="onBGSelect($files)" ng-model="imageData" accept="" /> 
</div> 

Bild richtig auf den Server hochgeladen, sondern auf Seite aktualisieren, um die Bilddaten von $scope geleert wird auch nach $localStorage

Hinweis verwendet: ng-file-select ng-file-change ist Direktive von ng-upload

Answer 1

Was ist das geschieht, ist, wenn die Datei auf das Aufschieben Server, dann aktualisieren Sie die Seite, da es im Controller keine Aufrufmethode gibt, um die $scope.profilePic neu zuzuordnen, daher wird sie leer.

function reloadPage() { 
    //You can set the picture again from storage 
    $scope.profilePic = $localStorage.profilePicture 

    //Or call the factory method again to repopulate it 
    userManagementFactory.userProfile($localStorage.userId).success(function (response) { 
     $localStorage.presentUser = response.result; 
     $scope.presentUser = $localStorage.presentUser; 

     //Check if profile pic already exisit 
     if($scope.presentUser.profile_picture != null) { 
      $localStorage.profilePic = $scope.presentUser.profile_picture; 
      $scope.profilePic = $localStorage.profilePic; 
     } 
     //Set it back from the $localStorage 
     else { 
      $scope.profilePic = $localStorage.profilePic 
     } 
    }); 
} 

//Run this method on page-reload as: 
reloadPage(); 

PS: Sie haben zwei verschiedene Schlüssel für Profil Pic in $localStorage als $localStorage.profilePicture und $localStorage.profilePic .Make sicher für die Neuzuweisung den richtigen Schlüssel verwenden.