Question

扩展程序在执行此类代码时崩溃：

/*this object is created in content script and passed t background script*/
var myurl = URL.createObjectURL(document.getElementById('myfile').files[0]);

/*code block from background script, it work good if file size is < 50MB, if bigger then extension will crash*/
var x = new XMLHttpRequest();
x.onload = function() {
       var uploadfile = new Uint8Array(x.response);


        var somearray1 = [...];
        var somearray2 = [...];

        var size = somearray1.length + uploadfile.length + somearray2.length;

        var u8array = new Uint8Array(size);
        var i = 0;

         for (i = 0; i < somearray1.length; i++) 
         u8array[i] = somearray1.charCodeAt(i) & 0xff;


        for (var j = 0; j < uploadfile.length; i++, j++) 
        u8array[i] = ufile[j];

        for (i = 0; i < somearray2.length; i++) 
         u8array[i] = somearray2.charCodeAt(i) & 0xff;


        var req = new XMLHttpRequest();

        req.open("POST", Url);
        req.setRequestHeader("Content-Type",  'multipart/form-data; boundary=--_BOUNDARY_');
        req.send(u8array);

  };
x.open('GET', myurl); 
x.responseType = 'arraybuffer';
x.send();

我想上传一个200MB大小的文件，它会使扩展程序崩溃。如果我现在的方式不对，请帮我理解一些示例代码如何正确上传。

Answer 1

由于您上传数据的方式效率低下，您的扩展程序因内存不足而崩溃。

您不应该将文件加载到内存中，而是将文件对象传递给XMLHttpRequest，以便Chrome可以在上传表单中传输文件内容。这可以使用FormData对象完成。

最简单的方法是在内容脚本而不是背景页面上传表单，因为将File传递给后台并不容易。

// In a content script:
var myfile = document.getElementById('myfile').files[0];
var form = new FormData();
form.append('myfile', myfile);
// Add more key-value pairs using form.append(...key..., ...value...);

// Upload
var x = new XMLHttpRequest();
x.open('POST', 'http://example.com/');
x.send(form);

这是通过XMLHttpRequest流式传输文件所需的全部内容。 FormData对象将使用multipart / form-data算法进行序列化和上传。有关详细信息，请参阅http://www.w3.org/TR/XMLHttpRequest2/#the-send-method。

如果您不想在内容脚本中上传（因为您希望在页面关闭后继续上传，则必须通过共享将File对象传递到后台页面工作人员（充当蹦床）。如果您想了解有关此选项的更多信息，请阅读Does chrome.runtime support posting messages with transferable objects?。

当我尝试上传大文件时，chrome扩展程序崩溃了

1 个答案: