关于electron的跨域问题,有本地的图片的地址,访问不了本地的图片
项目中有上传图片功能,自定义input type=file 改变透明度和超出部分隐藏,把按钮和
点击的图标放在上传文件的按钮上面,然后又碰到到获取input里面的图片的本地的路径,
在electron就是不能跨域访问本地,如何解决呢:
百事不得其解,问了我们项目的老大,说是electron的跨域问题,改变如下
webSecurity webPreferences:{nodeIntegration: false, preload: js文件绝对路径 }
//发送图片
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的跨域问题,有本地的图片的地址,访问不了本地的图片的更多相关文章
- iis本地无法通过ip地址访问网站
防火墙等通通检查过没有发现问题,最后发现是我安装了一款adsafe的广告过滤软件捣的鬼,此软件设置界面没有这样的设置条款,估计是默认的配置,退出后,就ok了.
- 谷歌通过ajax获取本地JSON文件,为什么会显示跨域?转载的
在本地写了一段JSON代码,然后用ajax读取后,在浏览器打开,发现谷歌提示涉及到跨域问题, 但是跨域是由于协议,域名,端口中有一个不同,才会跨域,我在本地访问自己的文件,怎么和跨域扯上关系了?? 谷 ...
- 谷歌通过ajax获取本地JSON文件,为什么会提示跨域?
在本地写了一段JSON代码,然后用ajax读取后,在浏览器打开,发现谷歌提示涉及到跨域问题, 但是跨域是由于协议,域名,端口中有一个不同,才会跨域,我在本地访问自己的文件,怎么和跨域扯上关系了?? 下 ...
- Android 中加载本地Html 跨域问题,http协议允许加载
一.需求: 后台加载HTML的包时间太长,太卡,让把所有的HTML包放到前台:使用的是file://协议,有些内容和样式加载不出来,H5那边说需要用http://协议来加载: 二.处理过程: 安卓最简 ...
- 说一说javascript跨域和jsonp
同源策略 在浏览器的安全策略中“同源策略”非常如雷贯耳,说的是协议.域名.端口相同则视为同源,域名也可换成IP地址,不同源的页面脚本不能获取对方的数据. 要是想使用XMLHttpRequest或者常规 ...
- JS、JQuery和ExtJs的跨域处理
1.什么是跨域?跨域,JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象.简单地理解就是因为JavaScript同源策略的限制,a.com 域名下的js无法操作b.com或是c.a. ...
- Ajax_05之跨域请求
1.跨域请求: Cross Domain Request:跨域名的HTTP请求,浏览器从某个域名下的资源访问了另一域名下的另一资源(协议.域名或是端口号不同): ①浏览器允许跨域请求的情形: < ...
- js实现跨域(jsonp, iframe+window.name, iframe+window.domain, iframe+window.postMessage)
一.浏览器同源策略 首先我们需要了解一下浏览器的同源策略,关于同源策略可以仔细看看知乎上的一个解释.传送门 总之:同协议,domain(或ip),同端口视为同一个域,一个域内的脚本仅仅具有本域内的权限 ...
- 使用Web代理实现Ajax跨域
目前的工作项目分为前端和后台,双方事先约定接口,之后独立开发.后台每天开发完后在测试服务器上部署,前端连接测试服务器进行数据交互.前端和后台分开的好处是代码不用混在一个工程里一起build,互不干涉. ...
随机推荐
- c++ 多个线程读一个线程写同步
这种情况一般多个线程读是不需要加锁的.就在写的时候需要加锁. 那么要做的就是让不写的时候,读不受同步限制.让多线程自由的读. 这个时候就要用读写锁 boost已经有读写锁,而c++ 14才有读写锁. ...
- YAML 语言教程(转载)
用YAML语言读取配置是最快的,之前的suricata中用yaml读取了配置,并且在代码运行期间,对配置进行了维护,所以抽点时间,来了解一下YAML语言编程,下文虽然对YAML语言和JAVAScrip ...
- 基于matplotlib的数据可视化 - 笔记
1 基本绘图 在plot()函数中只有x,y两个量时. import numpy as np import matplotlib.pyplot as plt # 生成曲线上各个点的x,y坐标,然后用一 ...
- ext2文件系统 - mke2fs
上一遍博文的重点其实将ext2整体的组织框架,我们知道了ext2文件系统由块组组成,每个块组里面的组织形式.我们甚至直接把超级块和组描述符里面的内容,用十六进制形式展现了出来.这篇博文主要讲述如何 ...
- Selenium2自动化测试实战序言
记得很久之前接触自动化的时候看了一本关于某早期自动化测试工具的书,书名已经记不得了,内容却一直印象深刻.因为那本书根本就是把官方文档有选择性的翻译一遍,对于实际应用来说其作用几乎是零.因此从那时候起我 ...
- JAX-RS annotations
@Path("resource_path"):The @Path annotation defines the path to the base URL or resource_p ...
- php中array_merge合并数组详解
如果键名有重复,该键的键值为最后一个键名对应的值(后面的覆盖前面的).如果数组是数字索引的,则键名会以连续方式重新索引. 注释:如果仅仅向 array_merge() 函数输入了一个数组,且键名是整数 ...
- A标签href属性详解--记录八
1.去掉<a>标签的下划线 <ul style=" list-style-type:none; margin:0;color:Gray; font-size:11px;ma ...
- virtualbox 最小化安装centos7 配置双网卡(nat和桥接)记录----已经过期
该文章已经过期 请参考另一篇文章:virtualbox 安装centos7 配置桥接网卡,实现主机和虚拟机互通,虚拟机可以访问外网,解决无法上网问题 先说明一下为什么要配置双网卡? 配置nat ...
- mongodb MongoDB 聚合 group(转)
MongoDB 聚合 MongoDB中聚合(aggregate)主要用于处理数据(诸如统计平均值,求和等),并返回计算后的数据结果.有点类似sql语句中的 count(*). 基本语法为:db.col ...