代码之家  ›  专栏  ›  技术社区  ›  Mohammad

angularjs$http.post(…).success不是文件上载方法为[重复]的函数。

  •  1
  • Mohammad  · 技术社区  · 7 年前

    这个问题已经有了答案:

  • Is this a“deferred antpattern”? 3个答案

      我正试图通过AngularJS Web应用程序将新记录插入数据库,但问题是当我单击提交按钮时,在控制台窗口中出现以下错误。我正试图发布来自AngularJS应用程序throw wcf服务的数据。

      在object.fac.uploadFile上(controllers.js:139) 在fn(eval at compile(angular.js:15642),匿名:4:144) 范围:$eval(角度:JS:18533) 在DefaultHandlerWrapper(angular.js:3785)

      这是我的controller.js代码。

      //设置并获取item details值 $scope.item_id=“0”; $scope.item_price=“0”; getItemDetails(); var promiseget=angularjs_wcfservice.getitemdetails(); $scope.getItemDetailsDisp=pl.data 函数(errorpl){ } //变量 $scope.fileInvalidMessage=“”; $scope.filedescription_tr=“”; $scope.isformvalid=false; $scope.isformvalid=isvalid; //这是必需的,因为文件控件不支持Angular的双向绑定功能 $scope.chechfilevalid=函数(文件){ 如果($scope.selectedfileforupload!=空){ isvalid=真; 其他{ } $scope.fileInvalidMessage=“需要图像!”(二) $scope.isfilevalid=isvalid; //文件选择事件 var文件=文件[0]; $scope.selectedfileforupload=文件[0]; //保存文件 $scope.isFormSubmitted=true; 如果($scope.isformvalid&$scope.isfilevalid){ var itm详细信息={ 项目名称:$scope.item名称, 图像名称:$scope.image name, var promisepost=angularjs wcfservice.post(itmdetails); getItemDetails(); })(二) clearForm(); })(二) $scope.message=“所有字段都是必需的。”; //清除窗体 $scope.item_id=“0”; $scope.item_price=“0”; 角元素(inputelem).val(空); $scope.f1.$setpristine(); } .factory('fileUploadService',函数($http,$q){ var formdata=new formdata(); var defer=$Q.defer(); { 标题:“内容类型”:未定义, }) 推迟解决(d); .错误(函数()。{ 返还延期承诺; 返回FAC; })(二)

      
      

      这是我运行应用程序时的屏幕截图。

      . 2个答案

    • What is the explicit promise construction antipattern and how do I avoid it? 2个答案
    • Is this a “Deferred Antipattern”? 3个答案

    我正在尝试通过AngularJS Web应用程序将新记录插入数据库,但问题是当我单击提交按钮时,在控制台窗口中出现以下错误。我正在尝试发布来自AngularJS应用程序throw wcf服务的数据。

     **TypeError: $http.post(...).success is not a function
            at Object.fac.UploadFile (Controllers.js:139)
            at Scope.$scope.SaveFile (Controllers.js:80)
            at fn (eval at compile (angular.js:15642), <anonymous>:4:144)
            at callback (angular.js:27463)
            at Scope.$eval (angular.js:18533)
            at Scope.$apply (angular.js:18632)
            at HTMLFormElement.<anonymous> (angular.js:27468)
            at defaultHandlerWrapper (angular.js:3785)
            at HTMLFormElement.eventHandler (angular.js:3773)**
    

    这是我的controller.js代码。

    app.controller("AngularJs_WCFController", function ($scope, $timeout, $rootScope, $window, AngularJs_WCFService, FileUploadService) {
        $scope.date = new Date();
        //  To set and get the Item Details values 
        var firstbool = true;
        $scope.Imagename = "";
        $scope.Item_ID = "0";
        $scope.Item_Name = "";
        $scope.Description = "";
        $scope.Item_Price = "0";
        $scope.txtAddedBy = "";
        // This is publich method which will be called initially and load all the item Details.  
        GetItemDetails();
        //To Get All Records    
        function GetItemDetails() {
            var promiseGet = AngularJs_WCFService.GetItemDetails();
            promiseGet.then(function (pl) {
                $scope.getItemDetailsDisp = pl.data
            },
                function (errorPl) {
                });
        }
    
        //Declarationa and Function for Image Upload and Save Data 
        //-------------------------------------------- 
        // Variables 
        $scope.Message = "";
        $scope.FileInvalidMessage = "";
        $scope.SelectedFileForUpload = null;
        $scope.FileDescription_TR = "";
        $scope.IsFormSubmitted = false;
        $scope.IsFileValid = false;
        $scope.IsFormValid = false;
        //Form Validation 
        $scope.$watch("f1.$valid", function (isValid) {
            $scope.IsFormValid = isValid;
        });
    
        // THIS IS REQUIRED AS File Control is not supported 2 way binding features of Angular 
        // ------------------------------------------------------------------------------------ 
        //File Validation 
        $scope.ChechFileValid = function (file) {
            var isValid = false;
            if ($scope.SelectedFileForUpload != null) {
                if ((file.type == 'image/png' || file.type == 'image/jpeg' || file.type == 'image/gif') && file.size <= (800 * 800)) {
                    $scope.FileInvalidMessage = "";
                    isValid = true;
                }
                else {
                    $scope.FileInvalidMessage = "Only JPEG/PNG/Gif Image can be upload )";
                }
            }
            else {
                $scope.FileInvalidMessage = "Image required!";
            }
            $scope.IsFileValid = isValid;
        };
        //File Select event  
        $scope.selectFileforUpload = function (file) {
    
            var files = file[0];
            $scope.Imagename = files.name;
            alert($scope.Imagename);
            $scope.SelectedFileForUpload = file[0];
    
        }
        //---------------------------------------------------------------------------------------- 
        //Save File 
        $scope.SaveFile = function () {
            $scope.IsFormSubmitted = true;
            $scope.Message = "";
            $scope.ChechFileValid($scope.SelectedFileForUpload);
            if ($scope.IsFormValid && $scope.IsFileValid) {
                FileUploadService.UploadFile($scope.SelectedFileForUpload).then(function (d) {
    
                    var ItmDetails = {
                        Item_ID: $scope.Item_ID,
                        Item_Name: $scope.Item_Name,
                        Description: $scope.Description,
                        Item_Price: $scope.Item_Price,
                        Image_Name: $scope.Imagename,
                        AddedBy: $scope.txtAddedBy
                    };
    
                    var promisePost = AngularJs_WCFService.post(ItmDetails);
                    promisePost.then(function (pl) {
                        alert(p1.data.Item_Name);
                        GetItemDetails();
                    }, function (err) {
                        // alert("Data Insert Error " + err.Message); 
                    });
                    alert(d.Message + " Item Saved!");
                    $scope.IsFormSubmitted = false;
                    ClearForm();
    
                }, function (e) {
                    alert(e);
                });
            }
            else {
                $scope.Message = "All the fields are required.";
            }
        };
        //Clear form  
        function ClearForm() {
            $scope.Imagename = "";
            $scope.Item_ID = "0";
            $scope.Item_Name = "";
            $scope.Description = "";
            $scope.Item_Price = "0";
            $scope.txtAddedBy = "";
    
            angular.forEach(angular.element("input[type='file']"), function (inputElem) {
                angular.element(inputElem).val(null);
            });
            $scope.f1.$setPristine();
            $scope.IsFormSubmitted = false;
        }
    })
        .factory('FileUploadService', function ($http, $q) {
    
            var fac = {};
            fac.UploadFile = function (file) {
                var formData = new FormData();
                formData.append("file", file);
                var defer = $q.defer();
                $http.post("/shanuShopping/UploadFile", formData,
                    {
                        withCredentials: true,
                        headers: { 'Content-Type': undefined },
                        transformRequest: angular.identity
                    })
                    .success(function (d) {
                        defer.resolve(d);
                    })
                    .error(function () {
                        defer.reject("File Upload Failed!");
                    });
                return defer.promise;
            }
            return fac;
    
    
        }); 
    

    这是我运行应用程序时的屏幕截图。

    1 回复  |  直到 7 年前
        1
  •  2
  •   georgeawg    7 年前

    删除 deferred Anti-pattern

    app.factory('FileUploadService', function ($http, $q) {
        var fac = {};
        fac.UploadFile = function (file) {
            var formData = new FormData();
            formData.append("file", file);
            ̶v̶a̶r̶ ̶d̶e̶f̶e̶r̶ ̶=̶ ̶$̶q̶.̶d̶e̶f̶e̶r̶(̶)̶;̶
            var promise = $http.post("/shanuShopping/UploadFile", formData,
                {
                    withCredentials: true,
                    headers: { 'Content-Type': undefined },
                    transformRequest: angular.identity
                })
                .then(function(response) {
                    return response.data;
                })
                .catch(function(error) {
                    console.log("File Upload Failed!");
                    return $q.reject(error);
                });
                //.success(function (d) {
                //    defer.resolve(d);
                //})
                //.error(function () {
                //    defer.reject("File Upload Failed!");
                //});
            return  ̶d̶e̶f̶e̶r̶.̶p̶r̶o̶m̶i̶s̶e̶;̶  promise;
        }
        return fac;
    });