关于electron的跨域问题,有本地的图片的地址,访问不了本地的图片
项目中有上传图片功能,自定义input type=file 改变透明度和超出部分隐藏,把按钮和
点击的图标放在上传文件的按钮上面,然后又碰到到获取input里面的图片的本地的路径,
在electron就是不能跨域访问本地,如何解决呢:
百事不得其解,问了我们项目的老大,说是electron的跨域问题,改变如下
1 | webSecurity webPreferences:{nodeIntegration: false , preload: js文件绝对路径 } |
1 2 3 4 5 6 7 8 9 10 11 12 | //发送图片 sendImgFile(){ console.log( "this is sendImgFile click" ) var files = this .$refs.inputImg.files; //获取input里面的图片的地址后者文件的本地路径; var size = files[0].size; //大小 var file_path = files[0].path; //文件的本地路径 this .file_paths = file_path console.log( "获取图片的files:" ,files, "获取图片的大小:" ,size, "获取图片本地的地址:" ,file_path); var content = '<img src= "' + file_path + '" class="file-img">' ; 拼接img标签 // var content = '<img :src="'+this.file_paths+'">' this .$refs.chatSendContainer.innerHTML = content; }, |
import { BrowserWindow, globalShortcut, Menu } from 'electron' import Common from '../common/common.js' const winURL = process.env.NODE_ENV === 'development' ? `http://localhost:${require('../../../../config').port}` : `file://${__dirname}/index.html` function createWindow() { var mainWindow = new BrowserWindow({ height: Common.WINDOW_SIZE_LOGIN.height, width: Common.WINDOW_SIZE_LOGIN.width, resizable: false, frame: false, webPreferences:{webSecurity: false}//加上这个就可以获取到了本地的图片 }); mainWindow.loadURL(winURL); mainWindow.on('closed', () => { mainWindow = null }); //前期为了调试方面,默认打开控制台 mainWindow.webContents.openDevTools({ detach: true }); //注册打开控制台的快捷键 globalShortcut.register('ctrl+shift+alt+e', function () { let win = BrowserWindow.getFocusedWindow(); if (win) { win.webContents.openDevTools({ detach: true }); } }); //去掉默认菜单栏 Menu.setApplicationMenu(null); // eslint-disable-next-line no-console console.log('mainWindow opened'); BrowserWindow.mainWindow = mainWindow; return mainWindow; } module.exports = { createWindow };
分类:
electron
标签:
关于获取不到本地图片的问题
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源!
· 周边上新:园子的第一款马克杯温暖上架