데이터베이스에 이미지 업로드

Question

Im은 (는) 내 asp.net mvc 웹 프로젝트 내에서 내 프로필 이미지를 어떻게 업로드 할 수 있는지 알아 내려고합니다.

문제점은 실제 파일 업로드 대신 데이터 URI를 가져 오는 것과 URI가 내 자바 스크립트 내에서 생성되고 URI에 다른 형식의 입력 필드를 컨트롤러에 전달할 수 있는지 모르겠다는 것입니다.

보기 - 양식

양식 아래

@using (Html.BeginForm("Register", "Account", FormMethod.Post, new { @class = "form-horizontal", role = "form", enctype = "multipart/form-data" })) 
{ 
    @Html.AntiForgeryToken() 
    <h4>Create a new account.</h4> 
    <hr /> 
    @Html.ValidationSummary("", new { @class = "text-danger" }) 

    <div class="form-group"> 
     @Html.LabelFor(m => m.ProfilePicture, new { @class = "col-md-2 control-label" }) 
     <div class="col-md-10"> 
      <div id="wrapper" style="margin-top: 20px;"> 
       <div class="image-editor"> 
        <input type="file" class="cropit-image-input"> 
        <div class="cropit-preview"></div> 
        <div class="image-size-label"> 
         Resize image 
        </div> 
        <div class="controls-wrapper"> 
         <div class="slider-wrapper"> 
          <span class="icon icon-image small-image"></span> 
          <input type="range" class="cropit-image-zoom-input custom"> 
          <span class="icon icon-image large-image"></span> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
    <div class="form-group"> 
     @Html.LabelFor(m => m.UserName, new { @class = "col-md-2 control-label" }) 
     <div class="col-md-10"> 
      @Html.TextBoxFor(m => m.UserName, new { @class = "form-control" }) 
     </div> 
    </div> 
    <div class="form-group"> 
     @Html.LabelFor(m => m.Email, new { @class = "col-md-2 control-label" }) 
     <div class="col-md-10"> 
      @Html.TextBoxFor(m => m.Email, new { @class = "form-control" }) 
     </div> 
    </div> 
    <div class="form-group"> 
     @Html.LabelFor(m => m.Password, new { @class = "col-md-2 control-label" }) 
     <div class="col-md-10"> 
      @Html.PasswordFor(m => m.Password, new { @class = "form-control" }) 
     </div> 
    </div> 
    <div class="form-group"> 
     @Html.LabelFor(m => m.ConfirmPassword, new { @class = "col-md-2 control-label" }) 
     <div class="col-md-10"> 
      @Html.PasswordFor(m => m.ConfirmPassword, new { @class = "form-control" }) 
     </div> 
    </div> 
    <div class="form-group"> 
     <div class="col-md-offset-2 col-md-10"> 
      <input type="hidden" name="profilePicture" class="hidden-image-data"> 
      <input type="submit" class="btn btn-default" value="Register"/> 
     </div> 
    </div> 
} 

자바 스크립트

<script src="~/Scripts/jquery.cropit.js"></script> 
<script> 
    $(function() { 
     $('.image-editor').cropit({ 
      imageBackground: true, 
      imageBackgroundBorderWidth: 20, 
      initialZoom: 'image', 
      smallImage: 'stretch', 
      imageState: { 
       src: '/Images/ProfilePictures/no-img.png' 
      } 
     }); 
     $('form').submit(function() { 
      var imageData = $('.image-editor').cropit('export'); 
      // imageData containing the Data URI for the cropped image 
      $('.hidden-image-data').val(imageData); 
     }); 
    }); 
</script> 

는 컨트롤러 - 등록

public async Task<ActionResult> Register([Bind(Exclude = "ProfilePicture")]RegisterViewModel model) { 
      if (ModelState.IsValid) { 

       // To convert the user uploaded Photo as Byte Array before save to DB 
       byte[] imageData = null; 
       if (Request.Files.Count > 0) { 
        HttpPostedFileBase poImgFile = Request.Files["ProfilePicture"]; 

        using (var binary = new BinaryReader(poImgFile.InputStream)) { 
         imageData = binary.ReadBytes(poImgFile.ContentLength); 
        } 
       } 
.... more code .... 
} 
} 

더 자세한 설명을 요청하십시오.

Answer 1

데이터 URI는 바이너리 데이터의 비 - 바이너리 인코딩입니다. 그것이 당신이 원하는 데이터입니다.

아마도 base64로 인코딩되었으므로 쓰기 전에 서버에서 직접 base64로 디코딩 할 수 있습니다.

public class Base64Decoder 
{ 
     public static void Main() 
     { 
      string inputText = "This is some text."; 
      Console.Out.WriteLine ("Input text: {0}", inputText); 
      byte [] bytesToEncode = Encoding.UTF8.GetBytes (inputText); 

      string encodedText = Convert.ToBase64String (bytesToEncode); 
      Console.Out.WriteLine ("Encoded text: {0}", encodedText); 

      byte [] decodedBytes = Convert.FromBase64String (encodedText); 
      string decodedText = Encoding.UTF8.GetString (decodedBytes); 
      Console.Out.WriteLine ("Decoded text: {0}", decodedText); 

      Console.Out.Write ("Press enter to finish."); 
      Console.In.ReadLine(); 

      return; 
     } 
} 

:

여기 code here to encode into and from base64

은 위의 링크 된 사이트에서 예제 코드가 있습니다입니다