2017-07-18 1 views
0

Ich habe eine html:Parse: Posting hochgeladene Datei/Bild Backend

form.html:

<form method="post" enctype="multipart/form-data" action="/"> 
    <input type="file" name="pic" id="imgupload"> 
</form> 

<script> 
document.getElementById("imgupload").onclick = function({myFunction()}; 

function myFunction() { 
    var fileUploadControl = $("#imgupload")[0]; 
    if (fileUploadControl.files.length > 0) { 
     var file = fileUploadControl.files[0]; 
     var name = "photo.jpg"; 

     //how to pass this (parseFile) to server.js? 
     var parseFile = new Parse.File(name, file); 
    } 
} 
</script> 

und mein Backend-Server Code Express:

vereinfacht server.js (nur Server-Routing):

app.get('/', (req, res) => { 
    //loads the form.html from above. 
    res.sendFile(__dirname + "/form.html"); 
}) 

app.post('/', (req, res)=>{ 
     //once press submit button, will post parseFile to here 
     //from here, i will save the parseFile to database. 
     res.status(204).end(); 
}) 

Mein Ziel ist es, ein Bild hochzuladen, dann, wenn der Benutzer drücken Sie senden, die parseFile Variable wird gesendet an die app.post() in server.js, wo das Speichern stattfindet.

Ich habe versucht, multer, wo es nicht für Parse.File auf dem req.file nämlich funktioniert:

app.post('/', upload, (req,res)=>{ 
    //req.file contains the file information 
    var file = new Parse.File(name, req.file); 

    //save to database via Parse 
    file.save(); //example code. 
    res.status(200).success("test code") 
}) 

dieser Code gibt Typeerror in Parse wo Parse.File nicht in der Lage ist, ein Parse zu erstellen. Datei von req.file.

Jede Hilfe wird sehr geschätzt!

Vielen Dank im Voraus!

Antwort

0

Ich habe das gerade zur Arbeit.

Es scheint, ich muss das Bild in einem Base64-Format codieren und den Base64-Wert in ein HTML-Element zuweisen, um in die Post-Methode übergeben werden.

Etwas wie:

<body> 
<input id="inp" type='file' accept=".jpg"> 
<br> 
<img id="img" height="150"> 
</body> 

<input type="hidden" id="base64" name="base64" value=""> 
<br> 
<br> 
<input type="submit" id = "submit"> 
</form> 


<script type="text/javascript"> 
    function readFile() { 
     if (this.files && this.files[0]) { 
     var FR= new FileReader(); 
     FR.addEventListener("load", function(e) { 
     document.getElementById("img").src  = e.target.result; 
     //get the base64 encoded string and add it to id=b64. 
     document.getElementById("base64").value = e.target.result; 
    }); 

    FR.readAsDataURL(this.files[0]); 
    } 
} 

document.getElementById("inp").addEventListener("change", readFile); 

schließlich umgewandelt ich die Datei in base64 und base64 eingefügt, um den Wert in die Element-ID genannt base64.

Anschließend greifen Sie auf den base64-Wert zu, indem Sie req.body.base64 in der post-Methode aufrufen.

0

Die req.file ist nicht die Daten in einem Dateiformat, das Parse erwartet (stattdessen ist es ein Objekt im Format von Multer) - daher wird die Parse.File unangemessen aufgerufen. Siehe das Parse SDK hier: http://parseplatform.org/Parse-SDK-JS/api/classes/Parse.File.html Dies erklärt die Datentypen, die für jeden Funktionsparameter eingefügt werden können.

req.file.buffer sollte theoretisch funktionieren (vorausgesetzt, Sie erhalten jedes Mal eine einzige Datei von Multer). Da Sie Multer nicht auf diese Weise eingeschränkt haben, sollte Ihr Code wahrscheinlich auch ein Array von Dateien behandeln.

Sie müssen auch eine Zeichenfolge für den Dateinamen erstellen (Name scheint keine deklarierte Variable in Ihrem Code zu sein).