2

私が現在開発中の Firefox 拡張機能requestでは、Firefox アドオン SDK のモジュールを使用して、画像ファイルをサーバーにアップロードしようと何日も試みてきました。テキスト ファイルはアップロードできましたが、他の種類のファイルをアップロードできません。最終的な目標はスクリーンショットをアップロードすることなので、画像をアップロードできるようにする必要があります。これが私の現在のコードです：

params= file.read("C:\\FullPath\h3nf5v2c.png", "b");

//multipart form data
boundary = "---------------------------132611019532525";
var snapShotUpload = Request({
    url : "https://myurl.com",
        headers : {
        "Referer" : "https://myurl.com",
    "Content-Type" : "multipart/form-data; boundary=" + boundary,
    },
    content :  "--" + boundary + "\r\n" + "Content-Disposition: form-data; name='Upload_FileName'; filename='h3nf5v2c.png'\r\nContent-Type: application/octet-stream\r\n\r\n" + params + "\r\n--" + boundary + "--\r\n",                          
    onComplete: function(response) {
        console.log(response.text);
    }                        
});
console.log("request built");
snapShotUpload.post();

アップロードした画像が壊れていて読めません。

私の質問は、Firefox アドオン SDK
のモジュールを使用して画像を投稿するにはどうすればよいですか?request

4

4 に答える 4

2

ありがとうウラジミール、

Request モジュールを実際に変更したわけではなく、代わりに XMLHttpRequest を使用しただけです。誰かが興味を持っている場合に使用したコードは次のとおりです。

function sendImage(file){
        fName = "h3nf5v2c.png";

    // prepare the MIME POST data
    var boundaryString = '---------------------------132611019532525';
    var boundary = '--' + boundaryString;
    var requestbody = boundary + '\r\n'
            + 'Content-Disposition: form-data; name="Upload_FileName"; filename="'
            + fName + '"' + '\r\n'
            + 'Content-Type: image/png' + '\r\n'
            + '\r\n'
            + file.read()
            + '\r\n'
            + boundary + '--\r\n';

    // Send
    var http_request = Components.classes["@mozilla.org/xmlextras/xmlhttprequest;1"]
            .createInstance(Components.interfaces.nsIXMLHttpRequest);

    http_request.onreadystatechange = function() {
        if (http_request.readyState == 4 && http_request.status == 200) {
            console.log(http_request.responseText);
        }
    };

    http_request.open('POST', 'http://myUrl.com', true);
    http_request.setRequestHeader("Referer", "http://myUrl.com");                  
    http_request.setRequestHeader("Content-type", "multipart/form-data; boundary=" + boundaryString);
    //http_request.setRequestHeader("Connection", "close");
    http_request.setRequestHeader("Content-length", requestbody.length);
    http_request.sendAsBinary(requestbody);    

}

関数のファイル パラメータは、ファイル モジュールのファイル オブジェクトです。

私はクライアント側でのみ作業しており、フォームを介して挿入をシミュレートする必要があったため、最後の sendAsBinary 関数は非常に重要です。サーバー側にアクセスできる場合は、base64 でエンコードされたバージョンの画像を送信し、サーバー側でデコードする方がおそらく簡単です。

于 2012-10-01T17:33:18.607 に答える
1

残念ながら、答えは次のとおりです。このrequestモジュールは、主に URL エンコードされたデータを送信することを目的としているため、文字列以外のものは、エンコードする必要があるキーと値のペアを含むオブジェクトであると見なされます。そのため、マルチパート コンテンツを送信する必要がある場合、文字列を送信することが唯一の選択肢ですが、文字列はXMLHttpRequest常に UTF-8 としてエンコードされ、生のバイナリ データ (画像データなど) を送信しようとすると、望ましくない結果が生じます。

オブジェクトを使用するFormData方がはるかに簡単ですが、オブジェクトを作成しても、requestモジュールはそれを に渡しませんXMLHttpRequest。requestモジュール (packages/addon-kit/lib/request.jsアドオン SDK のファイル)を変更する以外に簡単な解決策はありません。次の行を見つけます。

let data = stringify(content);

次のコードに変更すると機能するはずです。

let {Ci} = require("chrome");
let data = content;
if (!(content instanceof Ci.nsIDOMFormData))
  data = stringify(content);

これにより、FormDataオブジェクトが変更されないことが保証されます。

FormDataでFile定義されていない可能性があることに注意してくださいmain.js。その場合は、JavaScript モジュールからそれらを「盗む」ことが機能するはずです。

let {Cu} = require("chrome");
var {FormData, File} = Cu.import("resource://gre/modules/Services.jsm")
于 2012-09-22T15:14:36.567 に答える
0

サーバーに画像を投稿する別の方法があると思います。base64 エンコーディングを使用できます。私はそれをテストしたことはありませんが、画像を変換する方法を説明するこの件名を Web で見つけました。これがお役に立てば幸いです。

于 2012-09-24T07:15:51.383 に答える
0

この例のように、FormData と XMLHttpRequests を一緒に使用すると、作業が簡素化されます。

function uploadFiles(url, files) {
    var formData = new FormData();
    for (var i = 0, file; file = files[i]; ++i) {
        formData.append(file.name, file);
    }

    var xhr = new XMLHttpRequest();
    xhr.open('POST', url, true);
    xhr.onload = function(e) { ... };

    xhr.send(formData);  // multipart/form-data
}

document.querySelector('input[type="file"]').addEventListener('change', function(e) {
    uploadFiles('/server', this.files);
}, false);

ソース: http://www.html5rocks.com/en/tutorials/file/xhr2/

于 2013-10-17T09:06:55.290 に答える