electron-vue fs 读取本地图片,并展示

效果:

在这里插入图片描述

获取到文件弹窗选择的图片地址,利用fs来加载本地图片

 fs.readFile(item, function (err, data) {
    if (err) {
        // console.log(err);
         } else {
         // base64图片编码字符串
        imgSrcList.push("data:image/jpg;base64," + data.toString('base64'));
                        }
                    })
<img :src="imgSrc" v-for="(imgSrc,index) of imgSrcList" :key="index">

fs.readFile()读取到文件流
利用 data.toString(‘base64’) 会转为base64(不包含data:image/jpg;base64,)
图片显示的时候是需要设置 data:image/jpg;base64,
每次动态拼凑就可以显示图片了

在这里插入图片描述

  • 3
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 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
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值