7

AngularJS アプリでファイルをアップロードするためにng-flowを使用しています。ng-flowを介して複数のファイルをアップロードするとともに、データを正常に保存できます。ただし、データをクエリして JSON 経由で取得する場合、各行の ng-flow オブジェクトにファイルを追加する方法がわかりません。各ファイルは、JSON 文字列でエンコードされた base 64 です。

明確にするために、私は各井戸を取得しており、各井戸には名前、場所、許可など、および複数の画像があります。ウェルのすべての属性が、画像を除いて DOM に正常に取り込まれます。

HTML:

...
<div flow-init flow-name="well.flow">
    <span class="btn" flow-btn flow-attrs="{accept:'image/*'}">Upload File</span>

    <table>
        <tr ng-repeat="file in well.flow.files">
            <td>{{ $index+1 }}</td>
            <td>{{ file.name }}</td>
            <td>{{ file.msg }}</td>
            <td><span ng-click="file.cancel()"><i class="icon-remove"></i></span></td>
        </tr>
    </table>
</div>

AngularJS コントローラー内:

wellsFactory.getData($scope.wellsParams).then(function(data){
        angular.forEach(data.wells, function(wells, wKey){

            if(wells.files){
                var list = [];
                angular.forEach(wells.files, function(files, fKey){

                    var binaryFile = atob(files.file);
                    var byteNumbers = new Array(binaryFile.length);
                    for (var i = 0; i < binaryFile.length; i++) {
                        byteNumbers[i] = binaryFile.charCodeAt(i);
                    }
                    var byteArray = new Uint8Array(byteNumbers);
                    var blob = new Blob([byteArray.buffer], {type: "image/png"});

                    list[fKey] = blob;
                });
            /* Add blob files to wells ng-flow  */
            data.wells[wKey].flow.files = list; /* breaks */
            //** How do I add ng-flow files? **//
            }
        });

        $scope.wells = data.wells;
    });

画像ファイルを blob として設定した後でも、画像ファイルの出力 JSON base64 データを正常にテストしました。

/* Test Each File (within foreach) */
...
var reader = new FileReader();
reader.onload = function(e){
    console.log(e.target.result);
};
reader.readAsDataURL(blob);
...

各行の ng-flow オブジェクトに blob ベースの画像ファイルを適切にロードするにはどうすればよいですか?

4

2 に答える 2

11

フローに新しいファイルを追加する場合は、既存の方法を使用しますflow.addFile(file)。

var blob = new Blob(['a'], {type: "image/png"});
blob.name = 'file.png';
flow.addFile(blob);

をクリアしたい場合はflow.files、 を使用してflow.cancel()ください。

注:flow.filesはブロブの配列ではなく、FlowFile https://github.com/flowjs/flow.js#flowfileの配列です

fileBlob はプロパティ ( )でアクセスできますflow.files[0].file。

于 2014-06-03T18:49:41.223 に答える
1

私の Rails アプリでは、編集アクションで既存の画像をプリロードしたいと考えていました。list_images は、既存の画像の json オブジェクトです。addFile を呼び出すと、すべてのコールバックが呼び出され、サーバーに既に存在するファイルをアップロードしようとします。コールバックをスキップして、いくつかのプレースホルダーをスキャフォールディングするには:

  $scope.initExistingImages = function(listing_images, flowObj) {

    Flow.prototype.addExistingFile = function (file, event) {
      var f = new Flow.FlowFile(this, file);
      this.files.push(f);
    };

    angular.forEach(listing_images, function(value, key) {
      var blob = new Blob(['pre_existing_image'], {type: value.image_content_type});
      blob.name = value.image.image_file_name;
      blob.image_url = value.image.image_url;
      blob.image_id = value.image.id;
      blob.alt_text = value.alt_text;
      blob.listing_image_id = value.id;
      flowObj.addExistingFile(blob);
    });
  };
于 2015-08-11T21:04:59.637 に答える