0

angular-file-upload を使用して、画像とフォーム データをサーバーにアップロードしています。私はそれを一度に1枚の画像で成功させることができました。

私の問題は、私のフォームでは、別々の入力を使用して 2 つの画像をアップロードする必要があることです (また、他のフォーム データを送信することもできます)。別々の入力を使用する理由は、画像の 1 つがサムネイル画像で、もう 1 つがヒーロー画像であるためです。それらを区別し、それぞれのファイル パスをデータベースのそれぞれの列に挿入する機能が必要です。

同じ入力を使用して複数のファイルをアップロードする方法を説明したこの github の問題を読みましたが、異なる入力を使用して複数のファイルをアップロードする方法については何も見つかりませんでした。多分私はそれらを誤解しています。

現在、ヘッダー画像を選択しようとすると、サムネイル画像の値のみが変更されます。

ここに私のフォームがあります：

 <form>
    ...(other text form inputs above)...
    <div class="form-group">
      <label class="col-sm-2 control-label"> Teaser</label>
      <div class="col-sm-8>
        <input class="form-control" filestyle="" accept=".png,.gif,.jpg,.jpeg" data-button-text="Choose image" type='file' data-classbutton='btn btn-default' data-classinput="form-control inline" nv-file-select='' uploader='uploader' options="{'field': 'thumbnail_url'}"
      </div>
    </div>
    <div class="form-group">
      <label class="col-sm-2 control-label"> Header Image</label>
      <div class="col-sm-8>
        <input class="form-control" filestyle="" accept=".png,.gif,.jpg,.jpeg" data-button-text="Choose image" type='file' data-classbutton='btn btn-default' data-classinput="form-control inline" nv-file-select='' uploader='uploader' options="{'field': 'header_url'}"
      </div>
    </div>

</form>

そして、これがファイルをサーバーに送信する方法です(onCompleteAllコールバックで、フォームデータをサーバーに送信しています):

    $scope.uploader = new FileUploader({
      url: '/laravel/public/admin/events/thumbnail_url/file_upload',
      alias: 'files',
      headers: {
      // 'X-CSRF-Token': n/a
      },
      onBeforeUploadItem: function(item) {
        /* Laravel file name alias */
        item.alias = 'file';
      },
      onSuccessItem: function(fileItem, response, status, headers) {
        $scope.newEventForm[fileItem.field] = '/laravel/public/uploads/events/' + response.filename;
      },
      onCompleteAll: function() {
        /* Now ready to save form data */
       AdminEvent.save($scope.newEventForm).$promise.then(function(response) {
          $scope.events.push(response.data);
          toaster.pop('success', 'Added', 'Event added successfully.');
        });
      }
    });
4

1 に答える 1

0

ng-file-upload でも同じ問題に直面しましたが、angular-file-upload は使用しませんでした。

したがって、このソリューションが役立つ場合があります。

私のアプリには、ユーザー プロフィール画像と背景画像があります。

ここで、プロファイル画像の入力値を ng-file-upload のファイル オプションで送信しましたが、2 番目のファイル入力値を送信する他のオプションは提供されませんでした。

それを解決するために私がしたこと

  1. 2 番目のファイル入力を作成し、ng-model="user.bg_avatar" のようなテーブル属性と同じ入力モデルを使用しました。bg_avatar はレールの背景画像属性です。

これで、レールに送信するAngularコントローラーのユーザーオブジェクト（user.bg_avatar）で2番目のファイル入力値を取得でき、レールが取得すると、それを他のユーザー属性で保存します。ただし、この属性を許可することを忘れないでください。

于 2015-10-27T11:47:37.703 に答える