2

在我目前正在开发的 Firefox 扩展中，我已经尝试了几天使用requestFirefox Add-on 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();

上传的图片已损坏，我无法阅读。

所以我的问题是：
如何使用requestFirefox Add-on SDK 的模块发布图像？

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的. 如果是这种情况，从任何 JavaScript 模块中“窃取”它们应该可以工作：Filemain.js

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

我认为还有另一种方法可以在您的服务器上发布图像。您可以使用 base64 编码。我从未测试过它，但我在网上找到了这个主题，它解释了如何转换图像。我希望这可以帮助你。

于 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 回答