Javascript 将输入文件传递到后台脚本

我想将输入文件从内容页传递到扩展背景脚本，然后在扩展背景脚本中使用FileReader（）加载它

因此，在网页中，我有一个

，从onchange事件，我将文件从内容脚本传递到背景页面，如下所示：

 var myfile = document.getElementById('fileid').files[0];
 chrome.runtime.sendMessage({myevent: "start", inputfile: myfile}, function(response) {});

在背景脚本中，我有以下内容：

chrome.runtime.onMessage.addListener(function(message,sender,sendResponse){

   if(message.myevent==="start")
   {
      var reader = new FileReader();

         reader.onload = function(e) {
              // file is loaded 
         }  


       reader.readAsArrayBuffer(message.inputfile);
   }
});

---

但是FileReader没有加载它，我不确定这是否是正确的方法，但我所需要的只是将输入文件元素传递给后台脚本，并使用FileReader加载它，以便通过HTTP POST从后台脚本发送它。请告诉我什么地方错了，或者如何正确地做。如果我看到一个示例代码，会有很大帮助，因为我对chrome扩展开发还不熟悉，经验也不丰富。

所有通过chrome扩展消息API发送的消息都必须是JSON可序列化的。 如果要在后台页面获取文件内容，最好为

文件

对象创建一个（临时）URL，将此URL传递到后台页面，并使用

XMLHttpRequest

获取其内容：

//创建URL
var url=url.createObjectURL（myfile）；
//将URL传递到后台页面（为简洁起见，请使用ommited）并加载它。。
var x=新的XMLHttpRequest（）；
x、 onload=函数（）{
var结果=x.响应；
//TODO:使用[object ArrayBuffer]
};
x、 打开（'GET'，url）；// 这适用于chrome。您可以在这里找到整个生产代码


main.js：


    // Crossbrowser support for URL
    const URLObj = window.URL || webkitURL;

    // Creates a DOMString containing a URL representing the object given in the parameter
    // namely the original Blob
    const blobUrl = URLObj.createObjectURL(imageBlob);
    console.log(blobUrl);
    chrome.runtime.sendMessage(blobUrl, (res) => {
      imgUrl = res;
      console.log(imgUrl);
      clearInterval(refreshIntervalId);
      // To prevent that it happens to halt at "  Image uploading ..."
      setTimeout(() => {
        var imgUrlText = document.querySelector(imgUrlTextBoxId);
        imgUrlText.value = imgUrl;
      }, 1000);
      // double check to clear interval to prevent infinite error loop of LoadingStateOne
      // Hope it works.
      setTimeout(() => {
        clearInterval(refreshIntervalId);
      }, 500);
      console.log("Stop uploading state message");

background.js：


chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.startsWith("blob")) {
    console.log("RECEIVED");
    getBase64Url(request).then((res) => {
      console.log("Arrived here");
      // Acquired from https://stackoverflow.com/questions/18650168/convert-blob-to-base64/18650249#
      const reader = new FileReader();
      reader.readAsDataURL(res);
      reader.onloadend = function () {
        const base64data = reader.result;
        console.log(base64data);

这是有道理的，我会检查一下，然后再回复你，我已经对你的答案投了赞成票，因为它看起来不错，对我来说是新的东西，我非常高兴看到你的解决方案对我有效，我会接受它。谢谢，我已经接受了你的回答。若文件的大小很小，那个么它就可以正常工作，但若文件大小为200MB，那个么扩展名就会崩溃。我试图做的是创建多部分HTTPPOST并上传一个大文件。你对此有什么建议吗？@Jigberto Crashing听起来像个虫子。你能提供一个简单的例子源代码，并提供复制的步骤吗？如果需要，我也可以为您报告错误。感谢您的支持，我已经为此打开了一个单独的问题，请检查链接，希望您能帮助我。谢谢@Armand在Chrome中，仍然没有一种简单/方便的方式将文件发送到后台。因为答案已经写好了，web可访问的扩展框架可以访问与后台页面相同类型的API，因此可以将这些API与DOM的postMessage一起使用来发送文件。然而，这是更复杂的。。。Firefox在其扩展消息API中提供了支持，允许您直接将文件/Blob发送到后台，这使它变得更加容易。