如何更新使用圖像數據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方法

回答

相關問題