javascript - 将输入文件传递给后台脚本

Question

我想将输入文件从内容页面传递给扩展后台脚本，然后在扩展后台脚本中使用FileReader() 加载它。

所以在网页中我有一个<input type="file">从 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 扩展开发的新手，而且经验不足。

Answer 1

所有通过 Chrome 扩展消息传递 API 发送的消息都必须是 JSON 可序列化的。如果你想在后台页面获取文件的内容，你最好为 File 对象创建一个(临时)URL，将此 URL 传递给后台页面并使用 XMLHttpRequest 获取其内容:

// Create URL
var url = URL.createObjectURL(myfile);
// Pass URL to background page (ommited for brevity) and load it..
var x = new XMLHttpRequest();
x.onload = function() {
     var result = x.response;
     // TODO: Use [object ArrayBuffer]
};
x.open('GET', url); // <-- blob:-url created in content script
x.responseType = 'arraybuffer';
x.send();

虽然为什么要将文件发送到后台页面？内容脚本也可以发送跨源请求。