AngularJS Przesyłanie obrazu z ng-upload

Question

Próbuję przesłać plik w AngularJS przy użyciu ng-upload, ale mam problemy. Moje html wygląda następująco:

<div class="create-article" ng-controller="PostCreateCtrl"> 
     <form ng-upload method="post" enctype="multipart/form-data" action="/write" > 
      <fieldset> 
       <label>Category</label> 
       <select name="category_id" class=""> 
        <option value="0">Select A Category</option> 
        <?php foreach($categories as $category): ?> 
         <option value="<?= $category -> category_id; ?>"><?= $category -> category_name; ?></option> 
        <?php endforeach; ?> 
       </select> 

       <label>Title</label> 
       <input type="text" class="title span5" name="post_title" placeholder="A catchy title here..." value="<?= $post -> post_title; ?>" /> 

       <label>Attach Image</label> 
       <input type="file" name="post_image" /> 

       <a href='javascript:void(0)' class="upload-submit: uploadPostImage(contents, completed)" >Crop Image</a> 

       <label>Body</label> 
       <div id="container"> 
       <textarea id="mytextarea" wrap="off" name="post_content" class="span7" placeholder="Content..."><?= $post -> post_content; ?></textarea> 
       </div> 
       <div style='clear:both;'></div> 
       <label>Preview</label> 
       <div id='textarea-preview'></div> 

      </fieldset> 
      <div class="span7" style="margin: 0;"> 
       <input type="submit" class="btn btn-success" value="Create Post" /> 
      <input type="submit" class="btn btn-warning pull-right draft" value="Save as Draft" /> 
      </div> 

     </form> 
    </div> 

A mój kontroler js wygląda następująco:

ClabborApp.controller("PostCreateCtrl", ['$scope', 'PostModel', 
function($scope, PostModel) { 

    $scope.uploadPostImage = function(contents, completed) { 
     console.log(completed); 
     alert(contents); 
    } 

}]); 

Problem jestem stoi to gdy obraz upraw jest trafiony i wykonuje uploadPostImage, to przesyła cały formularz . Nie pożądane zachowanie, ale mogę sprawić, żeby działało. Duży problem polega na tym, że parametry funkcji "upload" parametru uploadPostImage są zawsze niezdefiniowane, nawet jeśli "zakończony" parametr powraca jako prawdziwy.

Celem jest tylko przesłanie obrazu do kadrowania. Co robię źle w tym procesie?

Answer 1

Nie ma zbyt wielu dokumentów na temat kątów do przesyłania plików. Wiele rozwiązań wymaga niestandardowych dyrektyw innych zależności (jquery in primis ... wystarczy przesłać plik ...). Po wielu próbach znalazłem to z zaledwie angularjs (testowane na v.1.0.6)

html

<input type="file" name="file" onchange="angular.element(this).scope().uploadFile(this.files)"/> 

angularjs (1.0.6) nie obsługują NG-modelu na „wejście -file "tagi, więc musisz to zrobić w" natywny sposób ", który przekazuje wszystkie (ostatecznie) wybrane pliki od użytkownika.

kontroler

$scope.uploadFile = function(files) { 
    var fd = new FormData(); 
    //Take the first selected file 
    fd.append("file", files[0]); 

    $http.post(uploadUrl, fd, { 
     withCredentials: true, 
     headers: {'Content-Type': undefined }, 
     transformRequest: angular.identity 
    }).success(...all right!...).error(..damn!...); 

}; 

Chłodna część jest niezdefiniowany Content-Type i transformRequest: angular.identity które dają u $ http możliwość wyboru prawa „Content-Type "i zarządzaj granicą potrzebną do obsługi danych wieloczęściowych.

Answer 2

Możesz wypróbować wtyczkę angularjs ng-file-upload.

Jest dość łatwy w konfiguracji i obsłudze specyfiki angulary. Obsługuje również postęp, anulowanie, przeciąganie i upuszczanie oraz jest przeglądarką.

html

<!-- Note: MUST BE PLACED BEFORE angular.js--> 
<script src="ng-file-upload-shim.min.js"></script> 
<script src="angular.min.js"></script> 
<script src="ng-file-upload.min.js"></script> 

<div ng-controller="MyCtrl"> 
    <input type="file" ngf-select="onFileSelect($files)" multiple> 
</div> 

JS:

//inject angular file upload directives and service. 
angular.module('myApp', ['angularFileUpload']); 

var MyCtrl = [ '$scope', '$upload', function($scope, $upload) { 
    $scope.onFileSelect = function($files) { 
    //$files: an array of files selected, each file has name, size, and type. 
    for (var i = 0; i < $files.length; i++) { 
     var file = $files[i]; 
     $scope.upload = $upload.upload({ 
     url: 'server/upload/url', //upload.php script, node.js route, or servlet url 
     data: {myObj: $scope.myModelObj}, 
     file: file, 
     }).progress(function(evt) { 
     console.log('percent: ' + parseInt(100.0 * evt.loaded/evt.total)); 
     }).success(function(data, status, headers, config) { 
     // file is uploaded successfully 
     console.log(data); 
     }); 
    } 
    }; 
}]; 

Answer 3

W moim przypadku wyżej wymienionych metod pracują dobrze z PHP, ale gdy próbuję przesłać pliki z tych metod w node.js potem mam problem . Zamiast więc używać $ http ({.., .., ...}) użyj normalnego ajaxu jquery.

dla wybranych użycia pliku to

<input type="file" name="file" onchange="angular.element(this).scope().uploadFile(this)"/> 

A w regulator

$scope.uploadFile = function(element) { 
var data = new FormData(); 
data.append('file', $(element)[0].files[0]); 
jQuery.ajax({ 
     url: 'brand/upload', 
     type:'post', 
     data: data, 
     contentType: false, 
     processData: false, 
     success: function(response) { 
     console.log(response); 
     }, 
     error: function(jqXHR, textStatus, errorMessage) { 
     alert('Error uploading: ' + errorMessage); 
     } 
}); 
}; 

Answer 4

Błąd podczas przesyłania pliku: "pojemnik nie ma metody manipulowania po"

App.service('fileUpload', ['$http', function($http) { 
    this.uploadFileToUrl = function(file, uploadUrl) { 
     console.log("inside upload file service js "); 
     var fd = new FormData(); 
     fd.append('file', file); 

     $http.post(uploadUrl, fd, { 
       transformRequest: angular.identity, 
       headers: { 
        'Content-Type': undefined 
       } 
      }) 
      .success(function(response) { 

       console.log("file uploaded sucessfully " + response); 

      }) 
      .error(function(error) { 

       console.log("Error while uploading file " + JSON.stringify(error)); 
      }); 
    } 
}]); 

{ "error ": {" nazwa ":" Błąd "," status ": 404," wiadomość ":" Klasa współdzielona \ "kontener \" nie ma protokołu obsługi metod IN POST/5555-1111 "," statusCode ": 404," stack ":" Błąd: