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

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

新規登録して質問してみよう
ただいま回答率
85.50%
MySQL

MySQL(マイエスキューエル)は、TCX DataKonsultAB社などが開発するRDBMS(リレーショナルデータベースの管理システム)です。世界で最も人気の高いシステムで、オープンソースで開発されています。MySQLデータベースサーバは、高速性と信頼性があり、Linux、UNIX、Windowsなどの複数のプラットフォームで動作することができます。

MVC

MVC(Model View Controller)は、オブジェクト指向プログラミングにおけるモデル・ビュー・コントローラーの総称であり、ソフトフェア開発で使われている構築パターンとしても呼ばれます。

.NET Framework

.NET Framework は、Microsoft Windowsのオペレーティングシステムのために開発されたソフトウェア開発環境/実行環境です。多くのプログラミング言語をサポートしています。

AngularJS

AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。

Q&A

1回答

2209閲覧

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

mcAPL

総合スコア15

MySQL

MySQL(マイエスキューエル)は、TCX DataKonsultAB社などが開発するRDBMS(リレーショナルデータベースの管理システム)です。世界で最も人気の高いシステムで、オープンソースで開発されています。MySQLデータベースサーバは、高速性と信頼性があり、Linux、UNIX、Windowsなどの複数のプラットフォームで動作することができます。

MVC

MVC(Model View Controller)は、オブジェクト指向プログラミングにおけるモデル・ビュー・コントローラーの総称であり、ソフトフェア開発で使われている構築パターンとしても呼ばれます。

.NET Framework

.NET Framework は、Microsoft Windowsのオペレーティングシステムのために開発されたソフトウェア開発環境/実行環境です。多くのプログラミング言語をサポートしています。

AngularJS

AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。

0グッド

0クリップ

投稿2015/12/18 11:02

編集2022/01/12 10:55

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

###前提・実現したいこと
・chomeでファイルアップロードして、MySQLへ保存する
・保存したファイルを表示する

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

###ソースコード

html

1// index.cshtml 2<div class="form-group-30 has-feedback"> 3 <label for="inputImg" class="control-label">Image</label> 4 <input type="file" file-model="imageFile" /> 5 <span id="result"> 6 <img id="inputImg" name="customImg" ng-model="com.ComImg" ng-if="imageFileSrc" style="max-width: 250px" /> 7 </span> 8</div> 9<button id="submitSave" type="submit" name="SubmitSave" class="btn btn-app-primary"> 10 <i class="fa fa-save"></i> Save 11</button>

javascript

1// index.js 2(function () { 3 scompanyEditModel.controller('CustomController', ['$scope', '$http', function ($scope, $http) { 4 $("#loading").fadeOut(); 5 6 var stRoute = location.pathname.split("/"); 7 var stPram = stRoute[stRoute.length - 1]; 8 var i = 0; 9 while (stPram == "" && stRoute.length > i) { 10 stPram = stRoute[stRoute.length - i]; 11 i++; 12 } 13 var param = { srcCustomId: stPram }; 14 $.getJSON(getCustom, param, function (data) { 15 $scope.$apply(function () { 16 $scope.company = data; 17 }); 18 }); 19 20 $scope.$watch("imageFile", function (imageFile ) { 21 $scope.imageFileSrc = undefined; 22 if (!imageFile || !imageFile.type.match("image.*")) { 23 return; 24 } 25 // Blob URLの作成 26 src = window.URL.createObjectURL(imageFile); 27 var result = document.getElementById("result"); 28 result.innerHTML = ""; 29 window.URL = window.URL || window.webkitURL; 30 var reader = new FileReader(); 31 reader.onload = function () { 32 $scope.$apply(function () { 33 result.innerHTML += '<img id="customImg" ng-if="imageFileSrc" src="' + src + '" style="max-width: 250px" />'; 34 }); 35 }; 36 reader.readAsDataURL(imageFile); 37 }); 38 39 $scope.save = function () { 40 $("#loading").fadeIn(); 41 $("#submitSave").prop("disabled", true); 42 $scope.errors = []; 43 $scope.message = ''; 44 var pram = $scope.custom; 45 $http({ 46 method: 'POST', 47 url: updateCompany, 48 data: JSON.stringify(pram) 49 }).success(function (data, status, headers, config) { 50 console.log('success'); 51 if (data.success === false) { 52 console.log(data.errors); 53 $scope.errors = data.errors; 54 } 55 else { 56 $scope.message = 'Saved Successfully !!!!'; 57 } 58 $("#loading").fadeOut(); 59 $("#submitSave").prop("disabled", false); 60 }).error(function (data, status, headers, config) { 61 $("#loading").fadeOut(); 62 $("#submitSave").prop("disabled", false); 63 $scope.message = 'Unexpected Error'; 64 }); 65 }; 66 }]); 67})();

C#

1// CustomEntity.cs 2public Guid Id { get; set; } 3public string Name { get; set; } 4public byte[] CustomImg { get; set; }

C#

1// CustomController.cs 2[HttpPost] 3 public ActionResult Update(CustomEntity entity) 4{ 5 if (ModelState.IsValid) 6 { 7 try 8 { 9 new CustomViewModel().Update(entity); 10 return Json(new { success = true }); 11 } 12 catch (Exception e) 13 { 14 ModelState.AddModelError("", "**Err**" + e.Message); 15 } 16 } 17 return Json(new 18 { 19 success = false, 20 errors = ModelState.Keys.SelectMany(k => ModelState[k].Errors).Select(m => m.ErrorMessage).ToArray() 21 }); 22}

###補足情報
・Visual studio 2015
・.net MVC4.5.2
・jQuery 2.1.4
・AngularJS 1.4
・MySQL

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

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

投稿2016/01/01 01:12

chiku_

総合スコア1464

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問