如何更新使用图像数据AngularJS $ http.put方法

我创建了一个Laravel应用上传与image.I数据很成功地做到在AngularJs

app.directive('fileModel', ['$parse', function ($parse) { 
return { 
    restrict: 'A', 
    link: function(scope, element, attrs) { 
     var model = $parse(attrs.fileModel); 
     var modelSetter = model.assign; 

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



app.controller('rowController', function($scope,$http,$modal,Row){ 
     $scope.saveItem=function(){ 
      var fd = new FormData(); 
     //fd.append('photo', $scope.myFile); 

     for(var key in $scope.newrow) 
      fd.append(key,$scope.newrow[key]); 

     $http.post('/api/row_material', fd, { 
      transformRequest: angular.identity, 
      headers: {'Content-Type': undefined} 
     }) 
      .success(function(data,status,headers,config){ 
       console.log(data); 
      }).error(function(data,status,headers,config){ 
       console.log(data); 
      }); 
     } 
    }

以上POST方法成功地利用以下方式这个任务为我工作。现在我需要使用$ http.put（）方法更新图像数据。我创建了如下所示的方法;

$scope.updateItem=function(){ 
     var fd = new FormData(); 

     for(var key in $scope.newrow) 
      fd.append(key,$scope.newrow[key]); 
     var uri='api/row_material/1'; 
     $http.put(uri,fd,{headers: '{"Content-Type": undefined}'}) 
      .success(function (data, status, headers, config) { 
       alert('Updated Successfully.'); 
      }) 
      .error(function (data, status, header, config) { 
       alert('Server error'); 
       console.log(data); 
      }); 
}

但是上面的put方法会导致下面给出的错误;

<!DOCTYPE html> 
<html> 
    <head> 
     <meta name="robots" content="noindex,nofollow" /> 
     <style> 
     /* Copyright (c) 2010, Yahoo! Inc. All rights reserved. Code licensed under the BSD License: http://developer.yahoo.com/yui/license.html */ 
     html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:text-top;}sub{vertical-align:text-bottom;}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}input,textarea,select{*font-size:100%;}legend{color:#000;} 
     html { background: #eee[…]

与上面放出来的工作方法使用使用以下way.But图片FormDate（）不上传到服务器

$scope.updateItem=function(){ 


     var uri='api/row_material/1'; 
     $http.put(uri,$scope.newrow,{headers: '{"Content-Type": undefined}'}) 
      .success(function (data, status, headers, config) { 
       alert('Updated Successfully.'); 
      }) 
      .error(function (data, status, header, config) { 
       alert('Server error'); 
       console.log(data); 
      }); 
}

我需要你的帮助使用FORMDATA put方法在AngularJS

更新图像数据

来源

2016-06-14 Shahid Neermunda

我会建议你使用NG文件上传插件。我不确定你在后端使用什么，但是这个插件可以帮助你发送从输入标签中选择的文件和你的数据。检查他们的所有演示，以获得清晰的想法。

https://github.com/danialfarid/ng-file-upload

感谢。

来源

2016-06-14 08:57:28

邮政方法工作正常。我需要把方法代码 –

这有几个很好的方法..

其中之一是下面给出的一个..

 var myApp = angular.module('myApp', []); 
 
      
 
      myApp.directive('fileModel', ['$parse', function ($parse) { 
 
       return { 
 
        restrict: 'A', 
 
        link: function(scope, element, attrs) { 
 
         var model = $parse(attrs.fileModel); 
 
         var modelSetter = model.assign; 
 
         
 
         element.bind('change', function(){ 
 
         scope.$apply(function(){ 
 
          modelSetter(scope, element[0].files[0]); 
 
         }); 
 
         }); 
 
        } 
 
       }; 
 
      }]); 
 
      
 
      myApp.service('fileUpload', ['$http', function ($http) { 
 
       this.uploadFileToUrl = function(file, uploadUrl){ 
 
        var fd = new FormData(); 
 
        fd.append('file', file); 
 
       
 
        $http.post(uploadUrl, fd, { 
 
         transformRequest: angular.identity, 
 
         headers: {'Content-Type': undefined} 
 
        }) 
 
       
 
        .success(function(){ 
 
        }) 
 
       
 
        .error(function(){ 
 
        }); 
 
       } 
 
      }]); 
 
      
 
      myApp.controller('myCtrl', ['$scope', 'fileUpload', function($scope, fileUpload){ 
 
       $scope.uploadFile = function(){ 
 
        var file = $scope.myFile; 
 
        
 
        console.log('file is '); 
 
        console.dir(file); 
 
        
 
        var uploadUrl = "/fileUpload"; 
 
        fileUpload.uploadFileToUrl(file, uploadUrl); 
 
       }; 
 
      }]); 
 
    \t \t \t

 \t 
 
      <div ng-app = "myApp" ng-controller = "myCtrl"> 
 
      <input type = "file" file-model = "myFile"/> 
 
      <button ng-click = "uploadFile()">upload me</button> 
 
      </div>

这将为客户端做的。现在对于服务器端，您需要编写一个脚本，可以正确处理上传的图像，并将其放置在您想要的目的地上。

This piece from the PHP documentation讨论PUT方法和文件上传（multipart/form-data）。

，因为我觉得一切都重要，我不能从它引用的任何部分。您应该详细阅读它，但总结一下，如果不更改您的Apache配置并创建辅助脚本，则不可能。

使用Laravel，您应该使用[Form Method Spoofing] [2]（基本上是一个名为_method的变量）并继续使用POST。 _method将允许您正确调用Laravel的PUT操作。

来源

2016-06-14 09:09:50

如何更新使用图像数据AngularJS $ http.put方法

回答

相关问题