Electron-vue读取本地文件

<template>
  <div>
		<el-button type="primary"  style="width: 100%;" @click="Create" :loading="loading">创建文件夹</el-button>
		<el-button type="primary"  style="width: 100%;" @click="writein" :loading="loading">写入数据</el-button>
		<el-button type="primary"  style="width: 100%;" @click="read" :loading="loading">读取数据</el-button>
		<el-button type="primary"  style="width: 100%;" @click="deleteall" :loading="loading">删除文件</el-button>
		<el-button type="primary"  style="width: 100%;" @click="addto" :loading="loading">将数据追加到文件里面</el-button>
		
		<p>{{list}}</p>
  </div>
</template>

<script>
 //创建文件模块
 const fs = require("fs").promises;
 //读取文件模块
 const FS = require("fs");
 //const path = require("path");
export default {
	data() {
		return{
			loading:false,
			list:''
		}
	},
	methods:{
		//创建文件夹
		Create(){
			// 如果文件结构不存在而你想要通过该操作创建它,则可以将其传入可选的 recursive 标志
			//打包之后  创建文件夹无效
			// fs.mkdir(path.join(__dirname, "newDir"), {
			//   recursive: true
			// });
		   fs.mkdir('newDir', {
		     recursive: true
		   });
		 
		},
	 writein(){
		//打包之后  创建文件无效
		// FS.writeFile(path.join(__dirname,"newDir", "greeting.json"),'312313',function(err){
		//     // 2.1 如果文件写入成功,则err的值等于null
		//     // 2.2 如果文件写入失败,则err的值等于一个 错误对象
		//     console.log(err);
		// })
		FS.writeFile('newDir/greeting.json','312313',function(err){
		    // 2.1 如果文件写入成功,则err的值等于null
		    // 2.2 如果文件写入失败,则err的值等于一个 错误对象
		    console.log(err);
		})
	
	 },
	 read(){
		 //打包之后  创建文件无效  所以就无法读取文件
		 // FS.readFile(path.join(__dirname,"newDir", "greeting.json"),'utf8',(err,data)=>{
			//  if(err){
			// 		 return console.log('文件读取失败!'+err.message);
			// 	 }
		 //     console.log('文件读取成功,内容是:'+data);
			//   this.list=data
		 // });
		 
		 FS.readFile('newDir/greeting.json','utf8',(err,data)=>{
		 			 if(err){
		 					 return console.log('文件读取失败!'+err.message);
		 				 }
		     console.log('文件读取成功,内容是:'+data);
		 			  this.list=data
		 });
	
	 },
	 deleteall(){
		 //删除文件
		 // FS.unlink(path.join(__dirname,"newDir", "greeting.json"), function(err){
		 //     if(err){
		 //         console.log(err)
		 //     }
		 //     console.log('删除成功!');
		 // })
		 FS.unlink('newDir/greeting.json', function(err){
		     if(err){
		         console.log(err)
		     }
		     console.log('删除成功!');
		 })
	 },
	 addto(){
		 //文件追加内容
		// FS.appendFileSync(path.join(__dirname,"newDir", "greeting.json"),'\nLearn Node.js with ', 'utf8'); 
		FS.appendFileSync('newDir/greeting.json','\nLearn Node.js with ', 'utf8'); 
	 },
	
	 
	},

  }
</script>

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
要实现拖拽读取文件,可以使用 HTML5 的拖拽 API,结合 Electron 的 IPC 机制来实现。 首先在 HTML 文件中添加一个容器,可以是一个 div 或者其他元素,用来接收文件拖拽事件: ```html <div id="drop-area"> <div class="drop-message">将文件拖拽到此处</div> </div> ``` 然后在渲染进程中,使用 JavaScript 来监听拖拽事件: ```javascript const { ipcRenderer } = require('electron') const dropArea = document.getElementById('drop-area') // 阻止默认的拖拽行为 dropArea.addEventListener('dragover', (event) => { event.preventDefault() }) // 显示拖拽提示信息 dropArea.addEventListener('dragenter', (event) => { event.preventDefault() dropArea.classList.add('drag-over') }) // 隐藏拖拽提示信息 dropArea.addEventListener('dragleave', (event) => { event.preventDefault() dropArea.classList.remove('drag-over') }) // 处理拖拽文件 dropArea.addEventListener('drop', async (event) => { event.preventDefault() dropArea.classList.remove('drag-over') const files = event.dataTransfer.files if (files.length > 0) { const filePath = files[0].path console.log('文件路径:', filePath) ipcRenderer.send('file-dropped', filePath) } }) ``` 这里通过 `ipcRenderer.send` 将文件路径发送给主进程,主进程可以在 `ipcMain` 中监听到这个事件,并进行相应的处理: ```javascript const { ipcMain } = require('electron') const fs = require('fs') ipcMain.on('file-dropped', (event, filePath) => { console.log('文件路径:', filePath) // 读取文件内容 fs.readFile(filePath, 'utf-8', (err, data) => { if (err) { console.error(err) event.reply('file-read-error', err.message) return } console.log('文件内容:', data) event.reply('file-read', data) }) }) ``` 这里使用了 Node.js 的 `fs` 模块来读取文件内容,读取完成后通过 `event.reply` 将文件内容返回给渲染进程。如果读取过程中出现错误,也通过 `event.reply` 返回错误信息。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

时光浅止

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值