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拓展中上传本地文件解决方法。

  

posted @ 2022-01-10 17:37  Qinkoo  阅读(934)  评论(0)    收藏  举报