Chrome拓展：将本地文件上传到服务器

需求：在 content-script 中选择本地文件，将File对象传到 background 中进行跨域请求，再返回请求结果到 content-script。

 

问题：使用 elementui upload组件获取本地文件打印出 File 对象没有问题.

在 content-script 中通过 chrome.runtime.sendMessage() 方法传到 background.

在background 中使用 chrome.runtime.onMessage.addListener 进行监听接收到的数据打印出来就变成了 [object]，File对象内容丢失了。

 

网上查阅资料后知道：谷歌扩展只能传输和 JSON 兼容的数据，可通过 JSON.parse(JSON.stringify(form_data))判断兼容与否。

Blob 和 JSON 不兼容。

 

解决方案：要上传文件，可通过发送方将 Blob 对象转换为 dataURL，接收方解析回 Blob 对象，再生成 FormData 对象上传文件。

content-script 中：

background 中：

 

以上记录Chrome拓展中上传本地文件解决方法。