electron+vue3.0实现文件上传，生成bin文件后下载

原创已于 2023-01-07 11:26:08 修改 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#electron #javascript #vue

于 2023-01-07 11:17:46 首次发布

该文描述了一种文件操作流程，包括文件上传后获取路径，读取内容转为十六进制，进行数据校验和补位，然后将处理后的数据写入bin文件。使用Buffer.from进行数据处理能生成符合需求的文件，而未使用时会导致数据包含额外字符，影响输出格式。

1、文件上传，并获取文件路径

2.读取文件里面的数据，并且将数据转换为十六进制，然后对数据进行效验和补位，数据处理完之后再将数据转为Unit8Array

3.创建bin文件，再用Buffer.from包裹数组然后写入bin文件中，点击下载到电脑中

4.用Buffer.from来写入的数据后生成的文件（符合需求）

5.不用Buffer.from写入的数据会显示在Decoded Text下面，然后再一个一个数组编译成十六进制后写进左边的区域（其中包括空格和逗号也一起编译成十六进制后写进左边的区域，不符合需求）

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

ABC__789

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

【Electron Playground 系列】文件下载篇

xiaoheibanfe的博客

12-17

1588

作者：long.woo 文件下载是我们开发中比较常见的业务需求，比如：导出 excel。 web 应用文件下载存在一些局限性，通常是让后端将响应的头信息改成 Content-Disposition: attachment; filename=xxx.pdf，触发浏览器的下载行为。在 electron 中的下载行为，都会触发 session 的 will-download 事件。在该事件里面可以获取到 downloadItem 对象，通过 downloadItem 对象实现一个简单的文件下载管理器： .

Electron + Vue3 桌面应用开发实战指南

最新发布

2501_92234528的博客

08-08

1339

Electron 框架虽然降低了跨平台开发门槛，但实际项目中仍会遇到各种棘手问题。本文基于最新环境（Node.js v20.12.2、npm v9.8.1、Electron v29.1.1），结合实战经验，从基础搭建到生产部署，全方位讲解 Electron+Vue3 开发要点。对于中大型项目，推荐使用 electron-vite 框架，它完美整合了 Vite 的热更新能力和 Electron 的桌面特性。安装 cross-env：npm install cross-env --save-dev。

参与评论您还未登录，请先登录后发表或查看评论

Electron中实现大文件上传和断点续传功能

10-17

Electron是开源的框架，可以使用h5来开发跨平台pc桌面应用，这样前端开发这可以开发桌面应用了。这篇文章主要介绍了Electron中实现大文件上传和断点续传功能,需要的朋友可以参考下

Electron上传文件、打开文件夹(主进程、渲染进程)

蜡笔小新历险记的博客

05-28

4515

官方示例： const { dialog } = require('electron') console.log(dialog.showOpenDialog({ properties: ['openFile', 'multiSelections'] }))

electron-上传文件，下载csv txt xlsx

weixin_43843679的博客

03-20

2385

核心：启动主进程，创建窗口，加载指定界面，之后开启渲染进程，如果说渲染进程需要通信这时候利用ipc完成通信操作，之后通过主进程调用原生api,在进行跟操作系统进行互动从而完成功能的操作。

手把手教你 Electron + Vue 搭建前端桌面应用

Sanzhutech的博客

07-12

4157

一、在使用 Electron 之前我们要了解 Electron 是什么？ Electron 官网地址点此 : electron 官方地址 Electron 相当于一个浏览器的外壳 , 我们将编写的 HTML , CSS , Javascript 网页程序嵌入进 Electron 里面以便于在桌面上进行运行。通俗来讲它就是一个软件，如 QQ 、网易云音乐、优酷视频等等。功能至强大超乎你的想象二、开发环境的准备安装 Node.js 坏境 Node.js 官网地址点此 node

精选资源

electron框架+打包vue+react 成exe 安装下一步客户端桌面程序

08-28

总的来说，使用`Electron`框架结合`Vue.js`或`React.js`开发桌面应用，需要对Node.js环境、依赖管理、文件路径处理和系统差异有深入理解。通过解决上述问题，可以成功将项目打包为可执行的`.exe`文件，实现客户端...

python + vue + electron实现本地音乐播放器

qq_32109661的博客

01-28

3262

前言因为受够了一般音乐播放软件的各种没什么用的功能以及各种垃圾广告，所以想自己搞一个音乐播放器来用，花了几天时间就搞了这么个东西，跟大家分享一下。这个文档并不是针对前端新手的，所以如果你接触前端不久就简单了解一下就好。代码已经在我的Github上了，代码里也加了点注释，真的对这个很感兴趣的可以下载下来自己试试。这篇文章的叙述思路跟我实际开发的思路相同，主要分成三个步骤，下面将一步一步地说。第一步，使用vue做个网页播放器这是这个项目的重点，毕竟我本身就是个前端，先实现一个网页版来满足基本要求。

【Electron-vue】构建桌面应用（5）-Linux下打包安装程序deb文件

chenqk_123的专栏

09-21

5999

1.前言在上一篇博客中讲到交叉打包的问题，但是很遗憾的是，目前做不到。在window下打包的可执行程序，无法在Linux下执行，并且会出现core dumped的问题，目前无法解决在Linux下可以通过build生成windows下的可执行程序，并且在windows下可执行，而且在windows下通过Inno Setup打包生成可安装程序那接下来就是调研怎么在Linux系统中生成可执行程序。 2.Linux下生成可执行程序 1.准备工作因为VS code9（以下简称VS）开发工具

Electron 使用原生net上传文件并同时提交数据到JAVA后台

09-23

Electron 使用原生net上传文件并同时提交数据到JAVA后台，结合node的fs.createReadStream

electron-file-downloader:电子应用程序的简单文件下载器库

05-19

电子文件下载器用于应用程序的简单文件下载器库为什么？一个函数调用而不是必须手动实现很多。将文件保存到用户的Downloads目录，而不是提示。完成后，弹出扩展坞中的“下载”目录。（苹果系统）处理多个下载。显示徽章计数（仅适用于macOS和Linux）和下载进度。在macOS上的示例：安装 $ npm install electron-file-downloader 用法注册所有窗口这可能是您想要的应用程序。 const { app , BrowserWindow } = require ( 'electron' ) ; require ( 'electron-file-downloader' ) ( ) ; let win ; app . on ( 'ready' , ( ) => { win = new BrowserWindow ( ) ; }

electron+vue实现图片上传

weixin_42667490的博客

03-07

865

此实例为electron+vue2，需要vue3的宝子可自行转换，流程上没有区别。

vue3+electron开发桌面软件（9）——选中多个文件，右键上传

关注前端，关注原创

05-10

1496

从本系列第六篇文章开始，我们一共用三篇文章讲解了系统级右键实现文件上传、手动修改注册表实现级联菜单、electron操作修改注册表实现级联菜单。网络上大部分文章也止步于此，但是在很多业务场景下，我们都需要右键选中多个文件，实现一键上传功能。如图：网上部分文章也提到了多选文件（图片）并上传，但是基本都未进行任何代码操作，而是使用鼠标拖动多个文件放到electron应用的图标，利用electron默认的能力实现多文件上传，针对我们具体的需求，这种方式只能算是一种无法解决问题时的妥协方案。

【Electron】实现下载、上传、系统提示功能（dialog模块）

梅花寺

09-15

3800

本文主要介绍electron应用的dialog模块的适用场景，主要包括下载保存、文件上传、消息提示等场景。其中上传下载配合使用node的request模块。

现在,以编程方式在 Electron 中上传文件,是非常简单的!

iOS122-移动混合开发研究院

07-23

9958

具体到以编码方式上传文件这个问题上.这个问题的完整描述应该是类似于这样: 网站有自己的登录认证机制,在不需要在对网站登录机制做任何修改的前提下,如何自动上传用户相关的文件,比如用户头像?

vue3+electron开发桌面软件（6）——系统级右键实现文件上传

关注前端，关注原创

11-21

1387

vue3+electron开发桌面软件，系统级右键实现文件上传功能。非软件内右键菜单

Electron实现文件下载并展示下载进度

weixin_56295520的博客

07-17

6168

1.在主进程中定义一个全局变量 downloadItems 用于管理所有的下载任务项2.主进程在接收到下载文件任务的时候，将下载任务添加进入 downloadItems，通过win.webContents.send(‘watch-download-file-state’)把下载过程进度推送给渲染进程3.主进程监听渲染进程发送过来的事件，根据下载任务项downloadItems 来获取某个文件下载实例，进行相应的处理。

electron上传图片

dtbk123的博客

10-19

1797

使用elementui组件上传图片渲染进程 <template> <div class="hello"> <el-upload class="avatar-uploader upload" action="" :show-file-list="false" :before-upload="beforeAvatarUpload"> <img v-if="imageUrl" :src="imageUrl" class="avatar

electron+vue的项目如何调试

06-05

### Electron Vue 项目调试方法在基于 Electron 和 Vue 的项目中，调试是一个重要的环节。以下是关于如何调试此类项目的详细说明。 #### 1. 使用 vue-devtools 调试 Vue 部分 vue-devtools 是一个专门用于调试 ...