HTML、JS、MONGODBを使用して画像をアップロードして表示

Question

HTMLとJSを使用してページに画像を読み込むことができましたが、画像をMongoDBに投稿できないようです。 'ページ。

HTML：

<div class="container"> 
    <h1 style="text-align: center">Post a New Guitar</h1> 
    <div class="col-md-6"> 
     <form action="/guitars" method="POST"> 
     <div class="input-group"> 
      <label>Item Name</label> 
      <div class="input-group"> 
       <input class="form-control" type="text" name="name" placeholder="Name"> 
      </div> 
      <label>Upload Image</label> 
      <div class="input-group"> 
     <span class="input-group-btn"> 
      <span class="btn btn-default btn-file"> 
       Browse… <input type="file" id="imgInp"> 
      </span> 
     </span> 
     <input type="text" class="form-control" readonly> 
    </div> 
    <img id="img-upload"/> 

     <div class="input-group"> 
      <button class="btn btn-lg btn-primary btn-block">Submit!</button> 
     </div> 

    <a href="/guitars">Go Back</a> 
</div> 

JS：

 $(document).ready(function() { 
      $(document).on('change', '.btn-file :file', function() { 
       var input = $(this), 
     label = input.val().replace(/\\/g, '/').replace(/.*\//, ''); 
    input.trigger('fileselect', [label]); 
    }); 

    $('.btn-file :file').on('fileselect', function(event, label) { 

     var input = $(this).parents('.input-group').find(':text'), 
      log = label; 

     if(input.length) { 
      input.val(log); 
     } else { 
      if(log) alert(log); 
     } 

    }); 
    function readURL(input) { 
     if (input.files && input.files[0]) { 
      var reader = new FileReader(); 

      reader.onload = function (e) { 
       $('#img-upload').attr('src', e.target.result); 
      } 

      reader.readAsDataURL(input.files[0]); 
     } 
    } 

    $("#imgInp").change(function(){ 
     readURL(this); 
    });  
}); 

フォームを送信すると、私はそれがJSを使用してアップロードし、それが私に「保存」されるためにされた画像を表示したいですデータベース。

Answer 1

「画像をMongoDBに投稿する」とはどういう意味ですか？イメージをデータベースに保存しないでください。

あなたがしたいことは、画像にアップロードして、サーバーの公開されている場所に保存することです。データベースに保存するものは、イメージ自体ではなく、サーバー上のイメージの場所です。サーバーに保存されている

画像：モンゴDBに格納 /home/public/image.jpg

イメージパス： { path: '/home/public/image.jpg' }

あなたが戻ってあなたのHTMLページに行くと、あなただけのパスを照会する必要があります画像をMongo DBに保存し、その値を画像タグのソースとして使用します。

`<img src="${path}" />`