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)

})
运行结果

在这里插入图片描述

Logo

有“AI”的1024 = 2048,欢迎大家加入2048 AI社区

更多推荐