Question

对于我正在处理的MEAN堆栈中编码的站点，我希望允许用户上传图像，然后将该图像显示在用户的配置文件页面上，直到他们更改它为止。根据项目负责人的说法，每个用户都有一个文件（我假设在/ usersProfiles目录中尚未创建）。当用户上传图像时，它将被上载到他们的文件中。在配置文件页面的html文件中，配置文件图片的img src将是用户文件中上传图片的位置。

我已经看过关于如何完成上传和显示图像的类似答案，但我并不熟练使用MEAN Stack来准确理解如何操纵问题的方法，以便它可以帮助我的项目。如果可能的话，我宁愿找到一个能够指导我如何学习完成这项任务的正确方向的答案，这样我就可以学习如何更好地使用MEAN Stack。

此外，我见过的许多答案都指出要使用angular-file-upload，但同样，我宁愿学习而不是简单地复制/粘贴其他代码。

以下是我目前的情况：

imageUpload.client.service.js：

'use strict';

    angular.module('users').service('imageUpload' , [ '$http' , function($http) {
        this.uploadImageToUrl = function(image , uploadUrl){
            var fd = new FormData();
            fd.append('image' , image);
            http.post(uploadUrl , fd , {
                transformRequest : angular.identity,
                headers: {'Content-Type': undefined}
            }).success(function(){
                console.log("Image uploaded");
            }).error(function(){
                console.log("Upload failed");

            });
        }
    }]);

fileModel.client.directive.js：

'use strict';

angular.module('users').directive('fileModel', ['$parse' , function($parse){
    return {
        restrict : 'A',
        link: function(scope , element , attributes){
            var model = $parse(attributes.fileModel);
            var modelSet = model.assign;

            element.bind('onChange' , function(){
                scope.$apply(function(){
                    modelSetter(scope , element[0].files[0]);
                });
            });
        }
    };
})]);

imageUpload.client.controller.js

'use strict';

angular.module('users').controller('imageUploadController' , ['$scope' , 'imageUpload' , 
    function($scope , imageUpload){

        $scope.uploadImage = function(){
            var image = $scope.profileImage;

            var uploadUrl = //Path to file
            imageUpload.uploadImagetoUrl(image , uploadUrl);
        };
    }]);

最后，profilePage视图上的相关代码：

<div class= "col-md-2" data-ng-controller = "imageUploadController" >
            <br>
            <img src= //Path to image alt="Profile Picture" width="220" style     ="border:3px solid black" height="200">
            <input type = "file" file-model = "myFile" />
            <button ng-click = "uploadImage()"> Change Picture </button>


</div>

此外，当img上传并作为img的src调用时，我是否必须以相同的方式建立路径，我需要为链接的视图制作路径，或者我只是使用文件路径如modules / user / userProfile / profileImage.jpeg？如果是后者，当我在<img src =中调用它时，我将如何确保图像文件路径始终正确？我认为我需要将上传时的图像名称更改为“ProfilePicture.jpeg”等标准，或者将路径分配给标准变量并使用该名称代替<img src = >。但是，我不知道如何去做任何一次

使用MEAN堆栈上传，保存和显示用户选择的个人资料照片

0 个答案: