require.jsモジュールでWebで生成された画像をアップロードする

Question

Webラベリングツールを使用してウェブサイトから画像を生成していますが、私はラベリングを終えた時点で画像をローカルにダウンロードする代わりに、私はそれをサーバーにアップロードします。この関数はjavascriptファイルにあり、JSに関連付けられたすべてのアップロードはフォームを送信することと関係しています。フォームとスーパーグローバルはありません。ウェブに生成されたイメージをサーバーにアップロードするにはどうしたらいいですか？

ここに私が現在持っているコードがあります。これはHTMLファイルではなく、jsファイルです。

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ファイル

<?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.'; 
?> 

本当に、あなたの助けに感謝ありがとうございました。

Answer 1

dataURItoBlob(file_data); blobオブジェクトを返すような関数名で表示されます。 PHPスクリプトにアップロードされたときのblob /ファイルオブジェクトは$_FILESではなく、$_POSTになります。そしてあなたはmove_uploaded_fileを使って目的の場所に移動します。

また、間違ったインデックスを使用しているようです。あなたのPHPでhidden_dataを使用していますが、あなたのJavaScriptでresultImageに名前を設定します。あなたは、javascriptで行ったのと同じ名前をPHPで使用する必要があります。

だからあなたのPHPコードは、サイドノート、使用しているFormDataオブジェクトとして

$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); 
} 

ようになるはずあなたは、彼らが自動的にAPIによって設定されるようにContent-Typeのようなリクエストヘッダを設定する必要はありません。