electron中，如何自动读取文件并通过File对象上传

最新推荐文章于 2025-06-27 13:34:37 发布

武东10号

最新推荐文章于 2025-06-27 13:34:37 发布

阅读量1.6w

点赞数 3

CC 4.0 BY-SA版权

分类专栏： electron 文章标签： electron File对象 node.js 通信 fs

本文链接：https://blog.csdn.net/Wbiokr/article/details/85777215

electron 专栏收录该内容

4 篇文章

订阅专栏

本文介绍在Electron应用中实现自动文件上传的方法。利用Node.js的fs模块读取本地文件，通过主进程与渲染进程通信，将文件流转换为File对象，满足API接口的上传需求。特别地，文章还提供了动态文件类型和名称处理的技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

electron写应用时，会遇到自动上传的需求。但是H5中只能通过input（type=file）来手动上传，JS又没有读取文件的权限，此时，我们可以借助node模块完成需求。

1. node读取文件流

fs模块读取本地文件，在主、进程通信时候，将要读取的文件路径filePath传给node。

主程main.js

fs.readFile(filePath,(err,data)=>{
  if(err) throw err;
  ipcMain.send('read-file',{data})
})

// 将node读取的文件流data，发送给进程

2. 新建File对象

进程中，接收主程发来的数据流新建File对象(比如，此对象是jpg类型)：

进程render.js

ipcRenderer.on('read-file',(e,{data})=>{
	console.log(data)
	let file = new File([data],'test.jpg',{type:'image/jpg'})
	console.log(file)
})

运行结果：
在这里插入图片描述

分别打印数据流与File对象，对于有些接口要求只能接收file对象才能上传的需求便得以解决。

案例中，假设已知文件格式为jpg，且对名字不做要求，但是假如，文件格式是动态，且对文件名字要求保持原名，则要对main.js 进行补充

3.动态type、name

main.js

fs.readFile(filePath,(err,data)=>{

  if(err) throw err;

  ipcMain.send('read-file',{data，picPath})

})

render.js

ipcRenderer.on('read-file',(e,payload)=>{

	const {data,picPath} = payload

	console.log(data)

	let file =  new File([data],picPath.split('/').reverse()[0],{type:'image/'+picPath.split('.').reverse()[0]})

	console.log(file)

})

运行结果

在这里插入图片描述