网站的目的及功能规划,如何用网络营销推广,百度站长链接提交平台,网站建设一般涉及后台功能文章目录 背景介绍案例介绍代码示例popup页面#xff0c;上传文件页面popup页面#xff0c;js上传代码#xff0c;file文件转base64background监听消息#xff0c;base64转file文件#xff0c;axios上传 附-转base64后直接下载 背景介绍 示例扩展API版本MV2。 以弹… 文章目录 背景介绍案例介绍代码示例popup页面上传文件页面popup页面js上传代码file文件转base64background监听消息base64转file文件axios上传 附-转base64后直接下载 背景介绍 示例扩展API版本MV2。 以弹出窗口popup和背景页面background page为例。 在浏览器中弹出窗口popup和背景页面background page之间可以通过消息通道进行通信。但是由于安全限制弹出窗口不能直接访问背景页面的文件系统或进行文件传输。 然而可以使用一些方法来实现弹出窗口向背景页面传输文件就是在popup页面将文件转为base64的字符串格式向background传输然后再将base64重新转为file对象达到传输文件的目的。
案例介绍 从popup页面选择文件开始上传触发上传按钮后获取到选择的文件并将文件传输到background触发上传接口传输到服务器端完成文件上传操作。
代码示例
使用到的js工具有jquery、axios。
popup页面上传文件页面
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titlepopup/titlestylebody {width: 400px;height: 450px;background-color: aliceblue;}.contnet {display: flex;flex-direction: column;flex-wrap: nowrap;align-items: center;}.upload_file {display: flex;flex-direction: column;margin-top: 88px;}.upload_btn {border: none;border-radius: 10px;background-color: #4343e0;font-size: 16px;color: white;font-weight: 400;font-family: 微软雅黑;cursor: pointer;}.upload_btn:hover {border: none;border-radius: 10px;background-color: #4343e0;font-size: 16px;color: white;font-weight: 400;font-family: 微软雅黑;cursor: pointer;box-shadow: 0px 0px 0px 1px #848181;}/style
/head
bodydiv classcontnetdiv classupload_file!-- type: input类型为文件选择类型name: 参数名accept: 上传文件的可选类型--input iduploadFile typefile namemyFile acceptapplication/vnd.openxmlformats-officedocument.spreadsheetml.sheet|application/vnd.ms-excel stylemargin-bottom: 5px; /button iduploadFileBtn classupload_btn typebutton上传/button/div/div
/body
script typetext/javascript src/utils/chrome.js/script
script typetext/javascript src/lib/jquery-3.6.3.js/script
script typetext/javascript src/popup/popup.js/script/htmlpopup页面js上传代码file文件转base64
// popop.js、jquery-3.6.3.js
// 绑定文件上传的button
$(#uploadFileBtn).click(() {// 如果是单文件上传选择第一个文件上传//let file $(#uploadFile)[0].files[0] // oklet file $(#uploadFile).prop(files)[0]if (!file) {alert(文件上传 请先选择文件)return}let boo confirm(是否确认上传文件\n\r 请谨慎操作上传文件)if (boo) {// file转base64let reader new FileReader()reader.readAsDataURL(file)reader.onload () {let base64 reader.result.split(,)[1]// 发送base64到background// chrome.jssendMessageToBackground({type: upload, base64: base64}, (rsp) {// 上传成功 or 失败后做一些操作})}}
})background监听消息base64转file文件axios上传
// 上传文件
// axios.js
// base64 popup传过来的数据
function uploadFile(base64) {// base64转bloblet blob base64ToBlob(base64, application/vnd.ms-excel)// blob转filelet file new File([blob], 上传文件的名字[filename].xlsx, {type: application/vnd.ms-excel})// 构造formData表单对象发起post请求let formatData new FormData()formatData.append(file, file)// axios发送文件上传的请求return axios({url: upload_url,method: POST,headers: {xx-header: xxx,// Content-Type: multipart/form-data // 不需要设置Content-Type请求头axios请求机制会自动判断发起什么样的请求},transformRequest: [(data, headers) {delete headers[Content-Type]return data}],data: formatData}).then(rsp {// 服务器数据响应return rsp.data})
}/*** * param {*} mineType 选择适当的类型来转换base64并创建Blob二进制对象* application/pdf: 表示 PDF 文件类型可以以可移植文档格式查看和编辑。* application/msword 或 application/vnd.ms-word: 表示 Word 文档类型可以以 Microsoft Word 格式查看和编辑。* application/vnd.openxmlformats-officedocument.wordprocessingml.document: 表示 Word 2007 或更高版本的文件类型可以以 Office Open XML 格式查看和编辑。* application/epubzip: 表示 ePub 电子书类型可以以电子书格式查看和编辑。* application/vnd.ms-powerpoint 或 application/mspowerpoint: 表示 PowerPoint 演示文稿类型可以以 Microsoft PowerPoint 格式查看和编辑。* application/vnd.openxmlformats-officedocument.presentationml.presentation: 表示 PowerPoint 2007 或更高版本的文件类型可以以 Office Open XML 格式查看和编辑。* application/vnd.ms-excel 或 application/msexcel: 表示 Excel 电子表格类型可以以 Microsoft Excel 格式查看和编辑。* application/vnd.openxmlformats-officedocument.spreadsheetml.sheet: 表示 Excel 2007 或更高版本的文件类型可以以 Office Open XML 格式查看和编辑。* image/jpeg、image/png、image/gif 等表示图像类型的数据可以以图像的形式查看和编辑。* returns */
function base64ToBlob(base64, mineType) {mineType mineType || application/octet-streamconst byteCharacters atob(base64)const byteNumbers new Array(byteCharacters.length)for(let i 0; i byteCharacters.length; i) {byteNumbers[i] byteCharacters.charCodeAt(i)}let byteArray new Uint8Array(byteNumbers)return new Blob([byteArray], {type: mineType})
}
附-转base64后直接下载
function download(base64, mineType) {mineType mineType || application/octet-streamconst dataUrl data:${mineType};base64,${base64}const link document.createElement(a)// document.body.appendChild(link)link.href dataUrllink.download file.xlsx // 前提需要先知道是什么文件类型link.click() // 点击下载// document.body.removeChild(link) // 下载完成后移除标签
}
