web generiertes Bild in require.js Modul hochladen

Question

Ich benutze ein Web-Label-Tool, um ein Bild von der Website zu generieren, aber ich möchte die Funktion so ändern, dass, wenn ich mit der Beschriftung fertig bin, anstatt das Bild auf lokale herunterladen, Ich möchte, dass es auf den Server hochgeladen wird. Die Funktion befindet sich in einer JavaScript-Datei und alle mit JS verbundenen Uploads haben mit dem Senden von Formularen zu tun. Es gibt keine Form und Super Globals, wie soll ich ein Web-generiertes Bild auf den Server hochladen?

hier ist der Code, den ich derzeit habe, ist es nicht in HTML-Datei, es ist in js-Datei.

var file_data = annotator.export(); 
var formData = dataURItoBlob(file_data); 
var fd = new FormData(document); 
fd.append("resultImage",formData); 
url="upload/"; 
http.open("POST", url, true); 

// headers 
http.setRequestHeader("Content-type", "application/x-www-form-  urlencoded"); 
http.setRequestHeader("Content-length", fd.length); 
http.setRequestHeader("Connection", "close"); 

http.onreadystatechange = function() { 
if(http.readyState == 4 && http.status == 200) { 
    alert(http.responseText); 
} 
} 

http.send(fd); 

PHP-Datei

<?php 
$upload_dir = "upload/"; 
$img = $_POST['hidden_data']; 
$img = str_replace('data:image/png;base64,', '', $img); 
$img = str_replace(' ', '+', $img); 
$data = base64_decode($img); 
$file = $upload_dir . mktime() . ".png"; 
$success = file_put_contents($file, $data); 
print $success ? $file : 'Unable to save the file.'; 
?> 

wirklich zu schätzen Ihre Hilfe, danke.

Answer 1

dataURItoBlob(file_data); mit dem Namen der Funktion, die es aussieht, die ein Blob-Objekt zurückgeben wird. Blob/Datei-Objekte, wenn sie in ein PHP-Skript hochgeladen werden, werden in der $_FILES globalen, nicht $_POST sein. Und Sie würden move_uploaded_file verwenden, um es an Ihr gewünschtes Ziel zu verschieben.

Auch Sie scheinen den falschen Index zu verwenden. Sie verwenden hidden_data in Ihrem PHP, aber Sie setzen den Namen auf resultImage in Ihrem Javascript. Sie müssten den gleichen Namen in PHP verwenden wie im Javascript.

So Ihr PHP-Code so etwas wie

$upload_dir = "upload/"; 
$img = $_FILES['resultImage']; 
if($img["error"] == UPLOAD_ERR_OK){ 
    //should do other sanitation like making sure the file 
    //that is uploaded is the actual type of file you expect 
    $path = $upload_dir . mktime() . ".png"; 
    move_uploaded_file($img["tmp_name"], $path); 
} 

Als Randbemerkung aussehen sollte, bei der Verwendung und Formdata-Objekt Sie nicht über die Request-Header wie Content-Type festlegen müssen, da sie automatisch von der api eingestellt werden.