8

私はこの質問が何度も尋ねられるのを見てきましたが、私が試した限り、私はまだ結果を見ていません：

Blobを追加してデータを形成し、jqueryを介してPOSTするにはどうすればよいですか？

var reader = FileReader(); 
reader.readAsBinaryString(f);
reader.onload = function() {
    var slice = reader.result.slice(0,100, {type: "application/octet-stream"});

    var formdata = new FormData();
    formdata.append("blobData", slice); // I have verified via console.log(slice) that this has data
    formdata.append("blobName", "Photo");

    send(formdata);
}

function send(data) {
    $.ajax({
        url: "/upload",
        type: "POST",
        data: data,    
        cache: false,
        contentType: false,
        processData: false
    });
}

すべての非BLOBキー/値がリクエストに含まれ、BLOBのキーも含まれますが、BLOBデータは含まれません。

欠測データ

興味深いことに、Chromeの代わりにFirefoxを使用して投稿すると、そこに少しのデータが表示されますが、それほど多くはありません（これは、最大2MB相当のデータである必要があります...7バイトです）

ここに画像の説明を入力してください

4

1 に答える 1

5

私は最近この正確な問題に遭遇し、解決策を持っています。

中心的な問題は、reader.result渡されるreader.onloadの値がreadAsBinaryStringblobではなく文字列であるということです。当たり前のように聞こえますが、ブロブを使用していると思いました。StringオブジェクトとBlobオブジェクトの両方にsliceメソッドがあるため、変数sliceは、バイナリデータのように見えるデータで設定されますが、それでも単なる文字列です。String.slice（）メソッドはBlob.slice（）メソッドとまったく同じように機能し、3番目のパラメーターを無視するだけです。そのため、実際に何が起こっているかに気付くことはありません。

FormData仕様によれば、BlobまたはFileオブジェクトではない値はすべて文字列に変換されます。slice文字列は最初の非ASCII文字で切り捨てられているようです（正確な理由を推測していますが、重要な点は、文字列がに追加されたときに確実に切り捨てられていることですformdata）。

reader.result解決策は、最初にBLOBに変換することです。

reader.onload = function() {
    var blob = new Blob([reader.result]), 
        slice = blob.slice(0,100, {type: "application/octet-stream"});

    var formdata = new FormData();
    formdata.append("blobData", slice);
    formdata.append("blobName", "Photo");

    send(formdata);
}

（配列はBlobコンストラクターの要件です）。

Blob.slice slice（）メソッドはBlobオブジェクトを返し、formdata文字列変換によって混乱することなく追加できるため、これはblobです。

于 2013-08-15T19:10:02.347 に答える