問題描述

我正在嘗試從 Chrome 擴展程序中將圖像(帶有元數據)發布到 Picasa 網絡相冊.請注意，正如我在此處所述，使用 Content-Type image/xyz 的常規帖子有效.但是，我希望包含描述/關鍵字和 協議規范 描述了 multipart/related 格式 帶有 XML 和數據部分.

I'm trying to POST an image (with Metadata) to Picasa Webalbums from within a Chrome-Extension. Note that a regular post with Content-Type image/xyz works, as I described here. However, I wish to include a description/keywords and the protocol specification describes a multipart/related format with a XML and data part.

我通過 HTML5 FileReader 和用戶文件輸入獲取數據.我檢索一個二進制文件使用

I'm getting the Data through HTML5 FileReader and user file input. I retrieve a binary String using

FileReader.readAsBinaryString(file);

假設這是我在 FileReader 加載字符串后的回調代碼:

Assume this is my callback code once the FileReader has loaded the string:

function upload_to_album(binaryString, filetype, albumid) {

    var method = 'POST';
    var url = 'http://picasaweb.google.com/data/feed/api/user/default/albumid/' + albumid;
    var request = gen_multipart('Title', 'Description', binaryString, filetype);
    var xhr = new XMLHttpRequest();
    xhr.open(method, url, true);
    xhr.setRequestHeader("GData-Version", '3.0');
    xhr.setRequestHeader("Content-Type",  'multipart/related; boundary="END_OF_PART"');
    xhr.setRequestHeader("MIME-version", "1.0");
    // Add OAuth Token
    xhr.setRequestHeader("Authorization", oauth.getAuthorizationHeader(url, method, ''));
    xhr.onreadystatechange = function(data) {
        if (xhr.readyState == 4) {
            // .. handle response
        }
    };
    xhr.send(request);
}   

gen_multipart 函數只是從輸入值和 XML 模板生成多部分，并產生完全相同的輸出 作為規范(除了..二進制圖像數據..)，但為了完整起見，這里是:

The gen_multipart function just generates the multipart from the input values and the XML template and produces the exact same output as the specification (apart from ..binary image data..), but for sake of completeness, here it is:

function gen_multipart(title, description, image, mimetype) {
    var multipart = ['Media multipart posting', "   
", '--END_OF_PART', "
",
    'Content-Type: application/atom+xml',"
","
",
    "<entry xmlns='http://www.w3.org/2005/Atom'>", '<title>', title, '</title>',
    '<summary>', description, '</summary>',
    '<category scheme="http://schemas.google.com/g/2005#kind" term="http://schemas.google.com/photos/2007#photo" />',
    '</entry>', "
", '--END_OF_PART', "
",
    'Content-Type:', mimetype, "

",
    image, "
", '--END_OF_PART--'];
    return multipart.join("");
}

問題是，POST 有效負載與原始圖像數據不同，因此會導致錯誤請求(Picasa 不會接受圖像)，盡管在使用時它工作正常

The problem is, that the POST payload differs from the raw image data, and thus leads to a Bad Request (Picasa won't accept the image), although it worked fine when using

xhr.send(file) // With content-type set to file.type

我的問題是，如何讓 real 二進制圖像包含在多部分中?我認為它只是通過將它附加到 xml 字符串而被破壞，但我似乎無法修復它.

My question is, how do I get the real binary image to include it in the multipart? I assume it is mangled by just appending it to the xml string, but I can't seem to get it fixed.

請注意，由于 Picasa 中存在 舊錯誤，base64 不是解決方案.

Note that due to an old bug in Picasa, base64 is not the solution.

推薦答案

XMLHttpRequest 規范 聲明使用 .send() 方法發送的數據將轉換為 unicode，并編碼為 UTF-8.

The XMLHttpRequest specification states that the data send using the .send() method is converted to unicode, and encoded as UTF-8.

推薦的二進制數據上傳方式是通過FormData API.但是，由于您不只是上傳文件，而是將二進制數據包裝在 XML 中，因此此選項沒有用.

The recommended way to upload binary data is through FormData API. However, since you're not just uploading a file, but wrapping the binary data within XML, this option is not useful.

解決方案可以在的源代碼中找到FormData for Web Workers Polyfill，這是我遇到類似問題時寫的.為了防止 Unicode 轉換，所有數據都添加到一個數組中，最后作為 傳輸數組緩沖區.根據規范，字節序列在傳輸時不會被觸及.

The solution can be found in the source code of the FormData for Web Workers Polyfill, which I've written when I encountered a similar problem. To prevent the Unicode-conversion, all data is added to an array, and finally transmitted as an ArrayBuffer. The byte sequences are not touched on transmission, per specification.

以下代碼是基于 的特定衍生代碼Web Workers Polyfill 的 FormData:

function gen_multipart(title, description, image, mimetype) {
    var multipart = [ "..." ].join(''); // See question for the source
    var uint8array = new Uint8Array(multipart.length);
    for (var i=0; i<multipart.length; i++) {
        uint8array[i] = multipart.charCodeAt(i) & 0xff;
    }
    return uint8array.buffer; // <-- This is an ArrayBuffer object!
}

當您使用 .readAsArrayBuffer 而不是 .readAsBinaryString:

function gen_multipart(title, description, image, mimetype) {
    image = new Uint8Array(image); // Wrap in view to get data

    var before = ['Media ... ', 'Content-Type:', mimetype, "

"].join('');
    var after = '
--END_OF_PART--';
    var size = before.length + image.byteLength + after.length;
    var uint8array = new Uint8Array(size);
    var i = 0;

    // Append the string.
    for (; i<before.length; i++) {
        uint8array[i] = before.charCodeAt(i) & 0xff;
    }

    // Append the binary data.
    for (var j=0; j<image.byteLength; i++, j++) {
        uint8array[i] = image[j];
    }

    // Append the remaining string
    for (var j=0; j<after.length; i++, j++) {
        uint8array[i] = after.charCodeAt(j) & 0xff;
    }
    return uint8array.buffer; // <-- This is an ArrayBuffer object!
}

這篇關于XMLHttpRequest:以 XML 和圖像作為有效負載的多部分/相關 POST的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！