Javascriptはxhttpのzipファイルでメタデータを送信するPOSTリクエスト

Question

タイトルや特定の番号などのメタデータを含むzipファイルをアップロードする必要があります。

どちらか私が直接zipファイルを送信しています：

function generalPostRequest(content, url, cb) {  
    var xhttp = new XMLHttpRequest(); 
    xhttp.open("POST", url, true); 
    xhttp.withCredentials = true; 
    xhttp.setRequestHeader("Authorization", "Basic " + btoa("NAME:PASS")); 

    //DIFF 
    xhttp.setRequestHeader("Content-Type", "application/zip"); 
    //DIFF 

    xhttp.onreadystatechange = function() { 
     if (xhttp.readyState === 4 && xhttp.status === 200) { 
      if (cb) { 
       cb(JSON.parse(xhttp.response)); 
      } 
     } 
    }; 
    xhttp.send(content);//DIFF 
} 

しかし、その後、私はメタデータを追加する方法がわかりません。 他の方法は次のようになります。

function generalPostRequest(content, url, cb) { 
    var xhttp = new XMLHttpRequest(); 
    xhttp.open("POST", url, true); 
    xhttp.withCredentials = true; 
    xhttp.setRequestHeader("Authorization", "Basic " + btoa("NAME:PASS")); 

    //DIFF 
    xhttp.setRequestHeader("Content-Type", "application/json;charset=UTF-8"); 
    var params = JSON.stringify(content); 
    //DIFF 

    xhttp.onreadystatechange = function() { 
     if (xhttp.readyState === 4 && xhttp.status === 200) { 
      if (cb) { 
       cb(JSON.parse(xhttp.response)); 
      } 
     } 
    }; 
    xhttp.send(params);//DIFF 
} 

しかし、私は配列にzipファイルを追加する場合、JSON.stringify機能は、zipファイルを削除します。バイト配列に変換する必要があるかもしれません。

ソリューション1にメタデータを追加する方法、またはソリューション2のバイト配列にZIPを変換する方法を教えてください。

Answer 1

これは実際にはテストされていません。正確な値がわからないので、contentの場合は、とにかく適切なテストケースを作成するのが難しいです。

1回のリクエストでJSONファイルとZipファイルを送信しようとしています。これを行う方法は、マルチパートリクエストです。

XMLHttpRequestは、FormDataオブジェクトからマルチパートリクエストを作成できます。

これを作成して適切なデータを入力するだけです。

var zip_data = get_zip_data(); 
var json_data = get_json_data(); 

var zip_file = new File(zip_data, "example.zip", { type: "application/zip" }); 
var json_file = new File(json_data, "example.json", { type: "application/json" }); 

var form_data = new FormData(); 
form_data.append("zip", zip_file, "example.zip"); 
form_data.append("json", json_file, "example.json"); 

var xhttp = new XMLHttpRequest(); 
xhttp.open("POST", url); 
xhttp.withCredentials = true; 
xhttp.setRequestHeader("Authorization", "Basic " + btoa("NAME:PASS")); 
xhttp.addEventListener("load", load_handler); 
xhttp.send(form_data); 

function load_handler() { 
    if (cb) { 
     cb(JSON.parse(xhttp.response)); 
    } 
} 

あなたがは、Content-Typeヘッダを設定してはいけません注意してください。 XHRはFormDataオブジェクトから自動的に生成します（ファイル間に境界マーカーを生成する必要があるため、これを実行する必要があります）。

これにより、通常の形式で<input type="file">を選択した場合と同様に、2つのファイルがサーバーに送信されます。それに応じてサーバーサイドコードを書きます（たとえば、PHPを使用している場合は$_FILES、Node.jsを使用している場合はmulterなど）。