.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
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。