質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.10%

AngularJSを使って選択した画像をMySQLへ保存する方法について教えてください。

受付中

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,346

mcAPL

score 15

.netMVCとAngularJS、MySQLを使ってシステムを開発しています。
次のような流れで画像のアップロード、保存、保存画像の表示を行いたいのですが、行き詰ってしまいました。
アーキテクチャを変えないような実現方法をご教示いただきたいです。
よろしくお願いいたします。

前提・実現したいこと

・chomeでファイルアップロードして、MySQLへ保存する
・保存したファイルを表示する

発生している問題・エラーメッセージ

①ファイルアップロードで選択した画像をsrcへBlobURLで設定して、画面へ表示できました。
②MySQLのDB項目をBLOBにして、BlobURLの値をbyte[]に変換して保存しようと考えていますが、
変換方法が見つけ出せていません・・・。
この方法で続けて問題ないでしょうか?

ソースコード

// index.cshtml
<div class="form-group-30 has-feedback">
    <label for="inputImg" class="control-label">Image</label>
    <input type="file" file-model="imageFile" />
    <span id="result">
        <img id="inputImg" name="customImg" ng-model="com.ComImg" ng-if="imageFileSrc" style="max-width: 250px" />
    </span>
</div>
<button id="submitSave" type="submit" name="SubmitSave" class="btn btn-app-primary">
    <i class="fa fa-save"></i> Save
</button>
// index.js
(function () {
    scompanyEditModel.controller('CustomController', ['$scope', '$http', function ($scope, $http) {
        $("#loading").fadeOut();

        var stRoute = location.pathname.split("/");
        var stPram = stRoute[stRoute.length - 1];
        var i = 0;
        while (stPram == "" && stRoute.length > i) {
            stPram = stRoute[stRoute.length - i];
            i++;
        }
        var param = { srcCustomId: stPram };
        $.getJSON(getCustom, param, function (data) {
            $scope.$apply(function () {
                $scope.company = data;
            });
        });

        $scope.$watch("imageFile",  function (imageFile ) {
            $scope.imageFileSrc = undefined;
            if (!imageFile || !imageFile.type.match("image.*")) {
                return;
            }
            // Blob URLの作成
            src = window.URL.createObjectURL(imageFile);
            var result = document.getElementById("result");
            result.innerHTML = "";
            window.URL = window.URL || window.webkitURL;
            var reader = new FileReader();
            reader.onload = function () {
                $scope.$apply(function () {
                    result.innerHTML += '<img id="customImg" ng-if="imageFileSrc" src="' + src + '" style="max-width: 250px" />';
                });
            };
            reader.readAsDataURL(imageFile);
        });

        $scope.save = function () {
            $("#loading").fadeIn();
            $("#submitSave").prop("disabled", true);
            $scope.errors = [];
            $scope.message = '';
            var pram = $scope.custom;
            $http({
                method: 'POST',
                url: updateCompany,
                data: JSON.stringify(pram)
            }).success(function (data, status, headers, config) {
                console.log('success');
                if (data.success === false) {
                    console.log(data.errors);
                    $scope.errors = data.errors;
                }
                else {
                    $scope.message = 'Saved Successfully !!!!';
                }
                $("#loading").fadeOut();
                $("#submitSave").prop("disabled", false);
            }).error(function (data, status, headers, config) {
                $("#loading").fadeOut();
                $("#submitSave").prop("disabled", false);
                $scope.message = 'Unexpected Error';
            });
        };
    }]);
})();
// CustomEntity.cs
public Guid Id { get; set; }
public string Name { get; set; }
public byte[] CustomImg { get; set; }
// CustomController.cs
[HttpPost]
 public ActionResult Update(CustomEntity entity)
{
    if (ModelState.IsValid)
    {
        try
        {
            new CustomViewModel().Update(entity);
            return Json(new { success = true });
        }
        catch (Exception e)
        {
            ModelState.AddModelError("", "**Err**" + e.Message);
        }
    }
    return Json(new
    {
        success = false,
        errors = ModelState.Keys.SelectMany(k => ModelState[k].Errors).Select(m => m.ErrorMessage).ToArray()
    });
}

補足情報

・Visual studio 2015
・.net MVC4.5.2
・jQuery 2.1.4
・AngularJS 1.4
・MySQL

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

0

CustomEntity.csで画像がbyte[]になっていますが、
angularjsから.netMVCにそのままバイナリで渡すのは難しいのではないかと思います。
post時、angularjsからは画像はbase64形式の文字列で渡して.netMVCでは渡された文字列をデコードして、
バイナリ形式に変換して、mysqlに保存、という形を取れば保存は可能かと思います。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.10%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る