Question

我正在使用fileReader读取文件并将图像存储在localStorage中并在视图中显示。

控制器：

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("");
    }
};
}]);

使用工厂将数据推送到服务器：

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

厂：

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

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>

图片已正确上传到服务器，但在页面刷新后，即使使用$scope

，图像数据也会从$localStorage清空

注意：ng-file-select ng-file-change来自ng-upload

Answer 1

发生的事情是将文件推送到服务器，然后刷新页面，因为控制器中没有调用方法来重新分配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();，因此它是空的。

$localStorage

PS：$localStorage.profilePicture中的个人资料Pic有两个不同的密钥，$localStorage.profilePic和h:panelGroup。确保使用正确的密钥进行重新分配。

无法在angular中使用localstorage持久保存数据

1 个答案: