Question

我创建了一个Laravel应用程序，用于通过image上传数据。我在AngularJs中使用以下方法成功完成了此任务

android:adjustViewBounds

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

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

但是上面的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方法使用FormDate（）使用以下方法。但是图像没有上传到服务器

<!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[…]

我需要你的帮助，使用AngularJS中的FormData put方法用图像更新数据

Answer 1

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

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

感谢。

Answer 2

有几个很好的方法......

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

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

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

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

2 个答案: