web-dev-qa-db-ja.com

ng-uploadで画像をアップロードするAngularJS

Ng-uploadを使用してAngularJSでファイルをアップロードしようとしていますが、問題が発生しています。私のhtmlは次のようになります。

<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>

そして、私のjsコントローラは次のようになります：

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

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

}]);

私が直面している問題は、トリミング画像がヒットし、uploadPostImageを実行し、フォーム全体をアップロードするときです。望ましくない動作ですが、動作させることができます。大きな問題は、jsでは、「completed」パラメーターがtrueに戻った場合でも、関数uploadPostImageの「contents」パラメーターが常に未定義であることです。

目標は、トリミング用の画像のみをアップロードすることです。このプロセスで何が間違っていますか？

javascriptangularjsangularjs-httpangularjs-fileupload
32
Devin Dixon

angularに関するドキュメントはほとんどありません。多くのソリューションは、カスタムディレクティブの他の依存関係を必要とします（primisのjquery ...ファイルをアップロードするためだけ...）。 'angularjsでこれを見つけました（v.1.0.6でテスト済み）

html

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

Angularjs（1.0.6）は、「入力ファイル」タグでng-modelをサポートしないため、「ネイティブな方法」で行う必要があります。ユーザーから（最終的に）選択されたすべてのファイルを渡します。

コントローラー

$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!... );

};

クールな部分は、undefinedcontent-typeとtransformRequest：angle.identity$ httpで適切な「コンテンツタイプ」を選択し、マルチパートデータを処理するときに必要な境界を管理する機能を提供します。

60
Fabio Bonfante

（ ng-upload の代わりに） ng-file-upload anglejsプラグインを試すことができます。

Anglejsの仕様を設定して処理するのはかなり簡単です。また、進行状況、キャンセル、ドラッグアンドドロップをサポートし、クロスブラウザーです。

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', ['ngFileUpload']);

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));
      }).then(function(response) {
        var data = response.data;
        // file is uploaded successfully
        console.log(data);
      });
    }
  };
}];
19
danial

上記の私の場合、メソッドはphpで正常に動作しますが、node.jsでこれらのメソッドを使用してファイルをアップロードしようとすると、問題が発生します。したがって、$ http（{..、..、...}）を使用する代わりに、通常のjquery ajaxを使用します。

ファイルを選択するにはこれを使用してください

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

そしてコントローラーで

$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);
      }
 });   
};
1
Tek Raj Pant