electron nodejs上传文件获取文件流

最新推荐文章于 2024-03-26 15:23:26 发布
最新推荐文章于 2024-03-26 15:23:26 发布
阅读量744 收藏
点赞数
分类专栏： node.js react+antd electron 文章标签： electron react.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36904182/article/details/125064597
版权
react+antd 同时被 3 个专栏收录
34 篇文章 1 订阅
订阅专栏
electron
4 篇文章 0 订阅
订阅专栏
node.js
1 篇文章 0 订阅
订阅专栏

使用antd upload组件，electron中ipcRenderer.invoke无法传递文件流；
传文件路径过去，然后使用nodejs获取文件流

 // 创建数据流
        const readerStream = fs.createReadStream(path)
        const formData = new FormData()
        formData.append("file_name", readerStream)
        formData.append("type", type)
落落的前端学习之路
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
node.js实现文件上传
xm2by的博客
04-07 1741
用node.js写一个文件上传demo 参考文献： [1] nodejs 实现简单的文件上传功能 [2] node.js学习之post文件上传 （multer中间件） [3] node.js实现formdata上传文件 [4] Nodejs express 文件上传 ...
nodejs实现文件上传下载
weixin_44806363的博客
04-18 2647
一、文件下载 前端：使用a标签请求要下载的文件内容 <a herf="/下载路径" download>下载</a> 后端： var fs = require("fs") var http = require("http") var ht = fs.readFileSync("./static/html/load.html") var server = http.createServer((req,res)=>{ if(req.method=="GET" &&
electron中，如何自动读取文件并通过File对象上传
Wbiokr的博客
01-04 1万+
electron写应用时，会遇到自动上传的需求。但是H5中只能通过input（type=file）来手动上传，JS又没有读取文件的权限，此时，我们可以借助node模块完成需求。 1. node读取文件流 fs模块读取本地文件，在主、进程通信时候，将要读取的文件路径filePath传给node。 主程main.js fs.readFile(filePath,(err,data)=&gt;{ i...
electron-上传文件，下载csv txt xlsx
weixin_43843679的博客
03-20 1593
核心：启动主进程，创建窗口，加载指定界面，之后开启渲染进程，如果说渲染进程需要通信这时候利用ipc完成通信操作，之后通过主进程调用原生api,在进行跟操作系统进行互动从而完成功能的操作。
记electron-vue读取本地文件资源
Kilie_z的博客
03-26 617
electron-vue读取本地
Electron教程（五）读取本地文件内容， icpMain icpRenderer 之间的交互
07-29 1万+
Electron教程（5）读取本地文件内容， icpMain icpRenderer 之间的交互 读取本地文件的原理： electron 的主进程里可以运行所有node 的功能，包含通过 os 读取系统信息，通过 fs 读取文件和目录。 那么如何实现文件的读取和展示呢？ 因为渲染进程是无法直接跟系统直接交互的，所以分两个部分： 主进程负责读取文件 主进程把读到的文件内容 -> 传递给渲染进程，再由渲染进程负责展示 知道如何使用这个，几乎所有其它的 node 相关的功能也都知道该如何使用了 node
基于 Electron & Vue.js 的文件同步客户端
最新发布
05-02
**基于 Electron & Vue.js 的文件同步客户端** 在现代软件开发中，Electron 和 Vue.js 是两个非常受欢迎的技术栈。它们的结合使得构建跨平台、功能丰富的桌面应用程序变得更加便捷。本项目是一个利用这两个技术构建...
splice基于Electron的前端文件处理工具
08-09
splice是一款基于Electron框架的前端文件处理工具，它利用了Electron的强大功能，将Node.js的后端能力引入到桌面应用程序中，使得开发者能够轻松处理和管理本地文件系统。Electron是一个开源框架，由GitHub开发，它...
Electron 使用原生net上传文件并同时提交数据到JAVA后台
09-23
3. 当请求头写入完成后，我们可以将文件流追加到连接中： ```javascript readStream.pipe(client); ``` 4. 为了处理服务器的响应，我们需要监听`data`和`end`事件： ```javascript client.on('data', (data)...
nodejs接受前端传来的参数并返回数据
leonnew的博客
05-16 1679
nodejs接受前端传来的参数并返回数据 一 、需求分析 ​ 前端传来一个参数，然后用nodejs作为后端接收，并将数据返回给前端 二、实现步骤 后端用nodejs来实现，通过设置一个接口来处理数据 数据传递一定存在跨域问题，这里通过 cors 处理跨域问题 前端通过Ajax将参数传递给该接口 新建一个shell_send.js var express = require('express'); var app = express(); var process = require('child_pr
Electron入门教程3 ——进程通信
weixin_50216991的博客
04-18 5005
进程间通信(IPC)是在Electron中构建功能丰富的桌面应用程序的关键部分。因为主进程和渲染进程在Electron的进程模型中有不同的职责，IPC是执行许多常见任务的唯一方式，比如从UI调用本地API或从本地菜单触发web内容的更改。
node.js文件流
weixin_44838759的博客
11-18 185
文件流 内存中数据和磁盘文件数据之间的流动 创建文件流 读取文件流 1、格式 fs.createReadStream(path,[options]) path :获取文件的路径 options：可选配置项 encoding:编码方式 start：起始字节 end：结束字节 highWaterMark:每次读取的数量 示例： let fs = require("fs"); const rs = fs.createReadStream(path,{ encoding:'utf-8', h
前端上传预览文件以及下载，node后端存储文件以及返回前端文件流下载
weixin_54968142的博客
12-13 1143
监听input选择的change事件，因为可能上传多个文件，这里循环处理，使用formdata上传文件，创建formdata实例，后面做判断，我这里只写了图片文件的预览，但是上传的话如果没有在input的属性中规定上传的文件类型，是什么文件都可以的。服务端部分，这里我们读取文件后直接返回文件的blob编码，我们在前端响应的时候将相应类型设置为buffer就可以接收到了,我这里还判断了前端需要下载什么类型的文件，目前是有视频和图片。img就是内部input元素，这样就可以触发选择文件的事件了。
Electron发送本地文件到服务端(base64)
Wang_Lao_Qi的博客
05-08 1180
Electron发送本地文件到服务端(base64) 在Node进程中是使用不了HTML5的内置对象的，比如File对象，FormData对象 所以想靠表单发送过去好像不太行 直接用fs读取文件内容并发送到渲染进程，在加入到File对象里面也不行，会在发送表单数据的时候发送一个空的表单对象（用的axios发送，原生的还没试过） 实现步骤 打开对话框选择图片 将选择的图片进行base64编码 发送编码和对应的文件数据 服务器用base64编码写入到本地 Electron主进程代码 Electron打
node服务器端接收前端上传图片并返回url路径保存数据库
zhuqiang1997的博客
05-06 3796
通过npm安装multer插件https://www.npmjs.com/package/multer 首先先在node启动js文件中注册express.static中间件 通过express.router将方法导出，在node启动js文件中注册 const express = require('express'); const router = express.Router(); const multer = require("multer"); const key = require('..
Node.js学习四（文件流stream）
qq_44872688的博客
01-15 2002
文章目录前言一、Node处理缓存的方式二、什么是Node.js Stream（流）三、stream（流）的类型四、创建可读流五、拷贝文件六、链式流1、压缩文件2、解压文件 前言        在我们学过fs模块后，可以知道读取文件时采用readFile()方法，那么如果文件太大，读取需要很长时间且内存空间有限时要怎么办呢，下面我们来学习一下Node.js中stream的知识。     &nb
electron使用nodejs实现文件流式下载并显示进度
热门推荐
踏莎行的博客
04-18 1万+
https://ourcodeworld.com/articles/read/228/how-to-download-a-webfile-with-electron-save-it-and-show-download-progress electron作为一种js编写跨平台桌面客户端的技术，目前已经使用比较广泛了，但有时候需要在软件里面进行内部文件下载实现热更新，electron自带的a...
electron nodejs读取本地视频文件通过video打开
06-06
要使用Electron和Node.js在浏览器中打开本地视频，你可以使用Node.js的`fs`模块来读取本地视频文件，然后将文件路径作为`<video>`标签的`src`属性值，最后使用Electron的`BrowserWindow`模块来创建一个包含`<video>`标签的窗口。 具体步骤如下： 1. 在你的Electron项目目录下，创建一个视频文件夹，并将你的本地视频文件放入该文件夹中。 2. 在你的JavaScript文件中，使用`fs`模块读取本地视频文件，示例代码如下： ```javascript const { app, BrowserWindow } = require('electron'); const path = require('path'); const url = require('url'); const fs = require('fs'); let mainWindow; function createWindow() { mainWindow = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true, }, }); const filePath = path.join(__dirname, '/videos/video.mp4'); // 视频文件路径 const fileExists = fs.existsSync(filePath); if (fileExists) { mainWindow.loadURL(url.format({ pathname: path.join(__dirname, 'index.html'), protocol: 'file:', slashes: true, })); mainWindow.webContents.on('did-finish-load', () => { mainWindow.webContents.send('play-video', filePath); }); } else { console.error('视频文件不存在'); } mainWindow.on('closed', () => { mainWindow = null; }); } app.on('ready', createWindow); app.on('window-all-closed', () => { if (process.platform !== 'darwin') { app.quit(); } }); app.on('activate', () => { if (mainWindow === null) { createWindow(); } }); ``` 其中，`filePath`是你本地视频文件的路径，`fileExists`变量用于判断视频文件是否存在。 3. 在你的HTML文件中，创建一个包含`<video>`标签的页面，示例代码如下： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>My Video Player</title> </head> <body> <video id="video-player" width="640" height="360" controls> Your browser does not support the video tag. </video> <script src="./renderer.js"></script> </body> </html> ``` 其中，`<video>`标签的`id`属性为`video-player`，`controls`属性用于显示视频控制条。 4. 在你的renderer.js文件中，使用`ipcRenderer`模块来接收主进程发送的视频文件路径，并将其作为`<video>`标签的`src`属性值，示例代码如下： ```javascript const { ipcRenderer } = require('electron'); ipcRenderer.on('play-video', (event, filePath) => { const videoPlayer = document.getElementById('video-player'); videoPlayer.src = `file://${filePath}`; }); ``` 其中，`ipcRenderer.on('play-video', ...)`用于接收主进程发送的视频文件路径，`videoPlayer.src`用于将其作为`<video>`标签的`src`属性值。 5. 运行JavaScript文件，即可通过Electron打开包含`<video>`标签的窗口，自动播放指定的本地视频文件。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值