senden Hochgeladene Bilddaten zum Knotenserver

Question

Ich arbeite mit node.js und teste, wie man ein Bild herauflädt, nachdem ich auf das plusglyphicon geklickt habe (Bild unten). Wie kann ich das ausgewählte Bild an den Server senden? Ich habe zuvor Bilder hochgeladen, aber das war in einem Formular, das die Post-Anfrage bearbeitet hat. Afterwrds würde ich es mit Multer auf der Serverseite behandeln. Hier weiß ich nicht, was ich tun soll, nachdem ich ein Bild als Profilbild ausgewählt habe. Ich habe über $ .post in der imageIsLoaded() Funktion nachgedacht, aber ich weiß nicht, was ich als die Daten hinzufügen soll.

Ich bin in der Lage, das Src-Attribut in dem Beispiel zu ändern, das ich unten gebe, aber ich möchte das gewählte Bild dauerhaft auf dem Server speichern.

This is how the website looks

Client-Seite JS-Datei

$("#upload").on('click',function() { 
    $("input[type='file']").click(); 
}); 

$(":file").change(function() { 
    if (this.files && this.files[0]) { 
     var reader = new FileReader(); 
     reader.onload = imageIsLoaded; 
     reader.readAsDataURL(this.files[0]); 
    } 
}); 

function imageIsLoaded (e) { 
    console.log('heloooooo') 
    $('.profileImg').attr('src', e.target.result); 
} 

EJS

<div class="profileImgSection"> 
     <% if (user.profilePicture.uploaded === false) { %> 
     <span id="upload" class="glyphicon glyphicon-plus-sign"></span> 
     <input type='file' /> 

     <img class="profileImg" 
      src="<%="images/pexels-photo-370799.jpeg"%>" 
      alt="fail"> 
     <% } else { %> 
     <img class="profileImg" 
      src="<%=user.profilePicture.link%>" 
      alt="fail"> 
     <% } %> 
    </div> 

CSS-Datei

input[type='file'] { 
    display: none; 
} 

Answer 1

Sie können Bild-Vorschau und über Ajax wenn Fileselektor ändern, HTML

<form id="form" enctype="multipart/form-data"> 
    <input type='file' onchange="readURL(this);" /> 
</form> 
<img id="preview" src="#" alt="your image" /> 

JS

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

       reader.onload = function (e) { 
        $('#preview') 
         .attr('src', e.target.result) 
         .width(150) 
         .height(200); 
       }; 

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

       //ajax post here 
       $.ajax({ 
        url: '', 
        method: 'POST', 
        data: new FormData($('#form')[0]) 
        }).done(function (data) { 

        }).fail(function(jqXHR, textStatus, errorThrown){ 

        }); 
      } 
     } 

laden