Question

我正在编写一个chrome扩展内容脚本，它将自己嵌入到某些页面中，当有某些文件类型链接（.doc，.torrent等）时，它会下载该文件，然后执行文件POST到一个将保存该文件的python Web服务器。 python服务器正在工作，并处理正常的multipart / form-data POST请求，并在我使用我为其编写的html接口时成功保存文件。

我有正确的javascript下载文件：

var req = new XMLHttpRequest();
req.open('GET', 'http://foo.com/bar.torrent', false);
req.overrideMimeType('text/plain; charset=x-user-defined');
req.send(null);
if (req.status != 200) return '';
var response = req.responseText;

然后当我尝试创建POST请求并上传时

// Define a boundary, I stole this from IE but you can use any string AFAIK
var boundary = "---------------------------7da24f2e50046";
var xhr = new XMLHttpRequest();
var body = '--' + boundary + '\r\n'
         // Parameter name is "file" and local filename is "temp.txt"
         + 'Content-Disposition: form-data; name="upfile";'
         + 'filename="temp.torrent"\r\n'
         // Add the file's mime-type
         + 'Content-type: application/bittorrent\r\n\r\n'
         + response + '\r\n';
         //+ boundary + '--';
xhr.open("POST", "http://python.server/", true);
xhr.setRequestHeader(
    "Content-type", "multipart/form-data; boundary="+boundary

);
xhr.onreadystatechange = function ()
{
    if (xhr.readyState == 4 && xhr.status == 200)
        alert("File uploaded!");
}
xhr.send(body);

它认为它上传成功，但是当我尝试打开文件时，它说数据已损坏。我认为这是某种编码问题，但我不是百分百肯定。

任何想法都会非常有用。

Answer 1

您的上传方法不起作用，因为所有二进制字符都编码为UTF-8。我在an answer this question发布了解释和解决方案。

在您的情况下，您不需要手动创建发布数据。以智能方式请求初始数据，并使用FormData对象发布二进制数据。例如：

var x = new XMLHttpRequest();
x.onload = function() {
    // Create a form
    var fd = new FormData();
    fd.append("upfile", x.response); // x.response is a Blob object

    // Upload to your server
    var y = new XMLHttpRequest();
    y.onload = function() {
        alert('File uploaded!');
    };
    y.open('POST', 'http://python/server/');
    y.send(fd);
};
x.responseType = 'blob';    // <-- This is necessary!
x.open('GET', 'http://foo.com/bar.torrent', true);
x.send();

注意：我在初始请求时将false替换为true。当它也可以异步创建请求时，避免使用同步XMLHttpRequest。

如果你不理解答案，这里有更多的例子和详尽的解释：

XMLHttpRequest: Multipart/Related POST with XML and image as payload - FormData未使用，但会手动创建帖子数据。
Upload a File in a Google Chrome Extension - 使用Web Workers（带有FormData polyfill）上传文件的Chrome扩展示例
Google chrome rehost image extension - 从页面抓取图片，然后使用Chrome扩展程序将图片上传到imgur。

Javascript二进制文件下载，以及Chrome扩展程序中的ajax文件POST上传

1 个答案: