项目中有上传图片功能,自定义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的跨域问题,有本地的图片的地址,访问不了本地的图片的更多相关文章

  1. iis本地无法通过ip地址访问网站

    防火墙等通通检查过没有发现问题,最后发现是我安装了一款adsafe的广告过滤软件捣的鬼,此软件设置界面没有这样的设置条款,估计是默认的配置,退出后,就ok了.

  2. 谷歌通过ajax获取本地JSON文件,为什么会显示跨域?转载的

    在本地写了一段JSON代码,然后用ajax读取后,在浏览器打开,发现谷歌提示涉及到跨域问题, 但是跨域是由于协议,域名,端口中有一个不同,才会跨域,我在本地访问自己的文件,怎么和跨域扯上关系了?? 谷 ...

  3. 谷歌通过ajax获取本地JSON文件,为什么会提示跨域?

    在本地写了一段JSON代码,然后用ajax读取后,在浏览器打开,发现谷歌提示涉及到跨域问题, 但是跨域是由于协议,域名,端口中有一个不同,才会跨域,我在本地访问自己的文件,怎么和跨域扯上关系了?? 下 ...

  4. Android 中加载本地Html 跨域问题,http协议允许加载

    一.需求: 后台加载HTML的包时间太长,太卡,让把所有的HTML包放到前台:使用的是file://协议,有些内容和样式加载不出来,H5那边说需要用http://协议来加载: 二.处理过程: 安卓最简 ...

  5. 说一说javascript跨域和jsonp

    同源策略 在浏览器的安全策略中“同源策略”非常如雷贯耳,说的是协议.域名.端口相同则视为同源,域名也可换成IP地址,不同源的页面脚本不能获取对方的数据. 要是想使用XMLHttpRequest或者常规 ...

  6. JS、JQuery和ExtJs的跨域处理

    1.什么是跨域?跨域,JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象.简单地理解就是因为JavaScript同源策略的限制,a.com 域名下的js无法操作b.com或是c.a. ...

  7. Ajax_05之跨域请求

    1.跨域请求: Cross Domain Request:跨域名的HTTP请求,浏览器从某个域名下的资源访问了另一域名下的另一资源(协议.域名或是端口号不同): ①浏览器允许跨域请求的情形:  < ...

  8. js实现跨域(jsonp, iframe+window.name, iframe+window.domain, iframe+window.postMessage)

    一.浏览器同源策略 首先我们需要了解一下浏览器的同源策略,关于同源策略可以仔细看看知乎上的一个解释.传送门 总之:同协议,domain(或ip),同端口视为同一个域,一个域内的脚本仅仅具有本域内的权限 ...

  9. 使用Web代理实现Ajax跨域

    目前的工作项目分为前端和后台,双方事先约定接口,之后独立开发.后台每天开发完后在测试服务器上部署,前端连接测试服务器进行数据交互.前端和后台分开的好处是代码不用混在一个工程里一起build,互不干涉. ...

随机推荐

  1. Linux安装配置maven以及搭建nexus私服(编写启动脚本)

    2011年07月12日16:32  下面介绍在Linux操作系统下安装配置maven和搭建nexus私服. 一.安装前的准备 下载 jdk http://www.oracle.com/technetw ...

  2. mysql--SQL编程(关于mysql中的日期) 学习笔记2

    一.mysql数据库中的date1.DATETIME和DATE:DATETIME占用8个字节,日期范围为"1000-01-01 00:00:00"到"9999-12-31 ...

  3. 实体格式化转xml

    In the past, I've done the following to control datetime serialization: Ignore the DateTime property ...

  4. iOS 特定时间内才做某件事,有类似奇葩需求可以参考

    我们项目启动的时候要弹出一个广告窗口,很简单的一个功能,服务器的判断一下满足条件,即返回数据,客户端判断数据部位NULL,则弹出弹窗但是老板说,这个要时间短弹出,每天的中午12点到下午2点不能弹出来这 ...

  5. 解决『Manifest merger failed with multiple errors, see 』

    Error:Execution failed for task ':app:processDebugManifest'.> Manifest merger failed with multipl ...

  6. Java之基于S2SH与手机数据交互(一)

    在前两篇博客,介绍了在eclipse上搭建SSH,可是好多小伙伴反映.看了偶写滴博客.跟着搭建还是错误百出,唉! 事实上不经历错误怎么能不见红线啊!于是我在上篇博客补充了他们的错误,还在被错误困扰的童 ...

  7. 第3章 Python基础-文件操作&函数 文件操作 练习题

    一.利用b模式,编写一个cp工具,要求如下: 1. 既可以拷贝文本又可以拷贝视频,图片等文件 2. 用户一旦参数错误,打印命令的正确使用方法,如usage: cp source_file target ...

  8. C#操作Sqlite快速入门及相关工具收集

    Sqlite不需要安装即可使用.Sqlite是不是那个System.Data.SQLite.DLL临时创建了数据库引擎? 1.新建一个WinForm项目,引用System.Data.SQLite.DL ...

  9. mybatis与mysql中的Date和String之间转换

    在javaweb开发过程中,难免会使用日期类型,在持久化时java的日期格式可以是String,Date.mysql格式可以是varchar,datetime.他们之间如何进行相互转化? 1 java ...

  10. MongoDB索引相关文章-摘自网络

    索引类型 虽然MongoDB的索引在存储结构上都是一样的,但是根据不同的应用层需求,还是分成了唯一索引(unique).稀疏索引(sparse).多值索引(multikey)等几种类型. 唯一索引 唯 ...