SummerNote onImageUploadサーバーリクエストをC＃BASE64に変換しますか？

Question

私はC＃MVCプロジェクトを持っています。ここでは、Summitのv0.8.2をWYSIWYGエディタとして使用し、jsPDFを使ってPDFを書き出す必要があります。私はこの仕事をするための例があることを知っています。私の問題は、summernoteで挿入されたイメージをカスタムのサイズ変更/処理する必要があることです。ここでも、onImageUploadコールバックを使用してこのイベントをキャプチャできることがわかります。受信したリクエストをサーバーで正しく渡してイメージを取得し、BASE64文字列に変換するのに問題があります。私はこれはかなり簡単だと思いますが、イメージを抽出するために着信要求をどうすればいいのか分かりません。私はあなたに十分な情報を持っているかどうかを確認するために全過程を伝えました。私がファイルにイメージから追加されたデータを変更しました - FYI：

ここに私のSummernoteセットアップです：

$('.summernote').summernote(
      {         
       toolbar: [ 
        ['style', ['bold', 'italic', 'underline', 'clear']] 
        , ['fontname', ['fontname']] 
        , ['fontsize', ['fontsize']] 
        , ['color', ['color']] 
        , ['insert', ['picture']] 
       ]     
       , callbacks: { 
        onImageUpload: function (image) {        
         uploadImage(image[0]); 
        } 
       } 
      } 
      ); 

はここでAJAX呼び出しです。結果を変えなかった。

function uploadImage(file, editor, welEditb) { 
     var data = new FormData();       
     //data.append("image", image); 
     data.append("file", file); 

     $.ajax({ 
      url: '/home/UploadSummerNoteFile', 
      cache: false, 
      contentType: false, 
      processData: false,     
      data: data, 
      type: "post", 
      success: function (data) { 
       alert('display base64 data: ' + data); 
       //editor.insertImage(welEditable, url); 
      }, 
      error: function (data) { 
       console.log(data); 
      } 
     }); 
    } 

私のサーバーの方法は、任意のパラメータを持っていない、と私はちょうどFILE（IMAGE？）コンテンツを抽出するかどうかはわかりません。実際のファイルを取得したら、サイズや解像度などを変更して変更してから、BASE64に変換してUIに送り返す必要があります。そこで、ここで私の質問：

• リクエストストリームからファイル（画像）を取得するにはどうすればよいですか？
• この「もの」が上のものをBASE64に変換するにはどうすればよいですか？

私は試した画像にオンラインのBASE64コンバータを使用しています。そのため、試行で有効な文字列が作成されていないことがわかりました。

ここでは、私がオンライン見つけた部分の例の仕事をするための試みに（悪い）それを修正、それがない：私は、バッファをどうする

 byte[] buffer = new byte[Request.InputStream.Length]; 
     Request.InputStream.Read(buffer, 0, buffer.Length); 

     string data = Encoding.Default.GetString(buffer); 


     string[] tokens = data.Split(','); 
     if (tokens.Length > 1) 
     { 
      // not sure what I'm doing, trying stuff. BOOOOM! 
      image = Convert.FromBase64String(tokens[1]); 
      base64 = Convert.ToBase64String(image); 

      //string fileName = DateTime.Now.ToString("yyyyMMddHHmmssffff") + ".png"; 
      //string path = Path.Combine(@"D:\www\images", fileName); 
      //File.WriteAllBytes(path, image); 
     } 

何が必要ですかデータオブジェクト？要求の中にファイルの内容はどこにありますか？サーバに転送するためにシリアル化されたときにすでに変換されていますか？また、他のすべてが完了したと仮定して、Summernoteのeditor.insertImage（welEditable、url）内に配置できるように、ファイルをサーバーに保存する必要がありますか？あなたの時間と助けてくれてありがとう！

Answer 1

私はこれを必要以上に困難にしたようです。これは単なる通常の要求なので、要求からファイルを抽出し、それをメモリストリームにコピーします。この場合は、BASE64文字列を呼び出し関数に送り返します。うまくいけば、これは他人を助けることでしょう

[HttpPost] 
    public JsonResult UploadFile() 
    { 
     var fileName = Request.Files[0].FileName; 
     var base64 = string.Empty; 

     using (var memoryStream = new MemoryStream()) 
     { 
      Request.Files[0].InputStream.CopyTo(memoryStream); 
      var fileContent = memoryStream.ToArray(); 
      base64 = Convert.ToBase64String(fileContent);    
     } 

     return Json(base64); 
    } 

はここuploadImageアヤックス方法の変更です：私は、IMGのインスタンスを作成し、BASE64の値になるようにSRCを変更します。

function uploadImage(file, editor, welEditb) { 
     var data = new FormData();        
     data.append("file", file); 

     $.ajax({ 
      url: '/home/UploadSummerNoteFile', 
      cache: false, 
      contentType: false, 
      processData: false,     
      data: data, 
      type: "post", 
      success: function (data) {      
       var image = $('<img>').attr('src', 'data:' + file.type + ';base64,' + data); 
       $('.summernote').summernote("insertNode", image[0]);      
      }, 
      error: function (data) { 
       console.log(data); 
      } 
     }); 
    }