Chrome扩展：本地应用上传本地文件到谷歌插件，再由插件上传到服务器

须知

谷歌扩展只能传输和JSON兼容的数据，可通过JSON.parse(JSON.stringify(form_data))判断兼容与否。

解决方案

FormData和JSON不兼容。要上传文件，可通过发送方将File对象转换为dataURL，接收方解析回File对象，再生成FormData对象上传文件。本地应用和插件通信是通过Chrome.runtime.sendMessage和Chrome.runtime.onMessageExternal。详细过程如下：

代码

发送方：本地应用

let fileReader = new FileReader();fileReader.onload = function(evt) {const dataURL = evt.target.result;// 本地应用发送数据chrome.runtime.sendMessage(extId, {method: 'POST', // 这里由于插件，我用的是fetch。ajax用typedataURL,url,headers}, (res) => {if (res.status === 0) {resolve(res);} else {reject(res);}});
}
// 将本地获取的file对象转换为dataURL
fileReader.readAsDataURL(file);

接收方：谷歌插件

chrome.runtime.onMessageExternal.addListener((message, sender, sendResponse) => {const { dataURL, url, ...rest } = message,blob = dataURLtoBlob(dataURL),img = blobToFile(blob, 'img'),formData = new FormData();formData.append('upload', img);rest.body = formData;  // fetch格式// 上传给服务器fetch(url, rest).then(res => res.json()) // fetch需要使用res.json()才能获取到数据.then((res) => {if (res.message === 'success') {sendResponse({ status: 0, res });} else {sendResponse({ status: -1, res });}});
}

接收方：格式转换代码

// dataURL转换为Blob
const dataURLtoBlob = (dataUrl) => {let arr = dataUrl.split(','),mime = arr[0].match(/:(.*?);/)[1],bstr = atob(arr[1]),n = bstr.length,u8arr = new Uint8Array(n);while (n--) {u8arr[n] = bstr.charCodeAt(n);}return new Blob([u8arr], {type: mime})
}
// Blob转换为File
const blobToFile = (blob, fileName) => {return new File([blob], fileName);
}

其他方案：
SharedWorker

相关文章：
File对象、dataURL、Blob对象互转
Message Passing - Google Chrome
chrome.runtime.onMessageExternal - Google Chrome
javascript - Does chrome.runtime support posting messages with transferable objects? - Stack Overflow
shared-workers-and-the-sharedworker-interface

Chrome扩展：本地应用上传本地文件到谷歌插件，再由插件上传到服务器相关推荐

Asp.Net 上传大文件专题(4)--利用ajax技术显示上传进度
====================================================== 注:本文源代码点此下载 ================================= ...
tp5.1 乐视云上传视频文件(https请求http乐视云上传接口)http网址下上传视频(https API接口)
一.sdk_php_v2.0.zip 上传视频网址:http://www.lecloud.com/zh-cn/help/api.html tp5.1 乐视云上传视频文件(https请求http乐视云 ...
Linux使用SSH上传下载文件,Linux下通过ssh scp命令上传下载文件
Linux下通过ssh scp命令上传下载文件. 1.上传本地文件到服务器 scp /path/filename username@servername:/path/ 例如 scp /var/tale ...
PHP上传大文件视频到阿里云oss分片上传
下载阿里云oss的SDK composer require aliyuncs/oss-sdk-php 上传视频,我用的是分片上传,其实阿里云的文档已经写得很清楚了,不过这是当我把上传的功能写出来后才这 ...
win7计算机之间传输文件,win7电脑与电脑之间怎么传大文件_win7电脑断网时怎么相互传大文件...
我们一般传送文件,利用qq.微信.邮箱等.如果碰到断网,手头又没有U盘.那么win7纯净版的两台电脑之间如何互传大文件呢?针对怎么在电脑之间快速传送大文件的问题.爱纯净整理了以下的办法,在局域网内可以 ...
mysql在windows上的安装文件_MySQL安装详细图解,在Window上的详细安装步骤图解
一. MySQL安装打开下载的mysql安装文件mysql-5.5.27-win32.zip,双击解压缩,运行"setup.exe". 选择安装类型,有"Typical( ...
电脑上删除的文件可以恢复吗如何恢复电脑上删除的文件
电脑早已走进千家万户,成为我们不可或缺的家庭设备,我们用电脑来学习.工作,处理各种数据.在使用电脑处理数据时,可能会失误操作,删除重要文件.那么,电脑上删除的文件可以恢复吗,如何恢复电脑上删除的文件. ...
java websocket 上传大文件,使用java websocket API和Javascript上传文件
我正在学习websocket并且已经使用websocket / json完成了聊天程序.但我坚持上传ATM的文件.任何建议&回答会很感激. 服务器端: package websocket; i ...
java pdf 首页缩略图_Java中将上传的文件首页生成缩略图（先将上传的文件转成pdf，然后将pdf转成jpg）...
1.首先将上传的非jpg,pdf格式的文件转成pdf,这个是采用OpenOffice进行转的,具体代码如下: private void officeToPdf(){ OpenOfficeConnect ...
mvc获取ajax上传base64文件,Spring MVC+ajax+base64+amazeui框架上传头像带裁剪功能
后台关键代码String filePath = null; String uuid = UUID.randomUUID().toString().replace("-", &quo ...

Chrome扩展：本地应用上传本地文件到谷歌插件，再由插件上传到服务器

须知

解决方案

代码

Chrome扩展：本地应用上传本地文件到谷歌插件，再由插件上传到服务器相关推荐

最新文章

热门文章