demo 加载本机图片

electron/config/config.default.js

@@ -50,7 +50,7 @@ module.exports = (appInfo) => {
     minWidth: 800,
     minHeight: 650,
     webPreferences: {
-      //webSecurity: false, // 跨域问题 -> 打开注释
+      webSecurity: false,
       contextIsolation: false, // false -> 可在渲染进程中使用electron的api，true->需要bridge.js(contextBridge)
       nodeIntegration: true,
       //preload: path.join(appInfo.baseDir, 'preload', 'bridge.js'),

electron/controller/os.js

@@ -93,6 +93,24 @@ class OsController extends Controller {
     return true;
   }
 
+  /**
+   * 选择图片
+   */
+  selectPic() {
+    const filePaths = dialog.showOpenDialogSync({
+      title: 'select pic',
+      properties: ['openFile'],
+      filters: [
+        { name: 'Images', extensions: ['jpg', 'png', 'gif'] },
+      ]
+    });
+    if (_.isEmpty(filePaths)) {
+      return null
+    }
+
+    return filePaths[0];
+  }   
+
   /**
    * 加载视图内容
    */

frontend/src/api/main.js

@@ -31,6 +31,7 @@ const ipcApiRoute = {
   messageShow: 'controller.os.messageShow',
   messageShowConfirm: 'controller.os.messageShowConfirm',
   selectFolder: 'controller.os.selectFolder',
+  selectPic: 'controller.os.selectPic',
   openDirectory: 'controller.os.openDirectory',
   loadViewContent: 'controller.os.loadViewContent',
   removeViewContent: 'controller.os.removeViewContent',

frontend/src/router/routerMap.js

@@ -80,6 +80,11 @@ const constantRouterMap = [
             name: 'OsFileIndex',
             component: () => import('@/views/os/file/Index.vue')
           },
+          {
+            path: '/os/file/pic',
+            name: 'OsFilePic',
+            component: () => import('@/views/os/file/Pic.vue')
+          },
           {
             path: '/os/windowview/index',
             name: 'OsWindowViewIndex',

frontend/src/router/subMenu.js

@@ -106,7 +106,13 @@ export default {
 			title: '系统主题',
 			pageName: 'OsThemeIndex',
 			params: {}
-		},   
+		},
+		'menu_110' : {
+			icon: 'profile',
+			title: '图片',
+			pageName: 'OsFilePic',
+			params: {}
+		}, 
 	},  
 	hardware: {
 		'menu_100' : {

frontend/src/views/os/file/Pic.vue

@@ -0,0 +1,53 @@
+<template>
+  <div id="os-file-pic">
+    <div class="one-block-1">
+      <span>
+          1. 加载本机图片
+      </span>
+    </div>  
+    <div class="one-block-2">
+      <a-space>
+          <a-button @click="selectPic(0)">选择图片</a-button>
+      </a-space>
+      <p></p>
+      <a-image
+        :width="500"
+        :src=picPath
+      />
+    </div>
+  </div>
+</template>
+<script>
+import { ipcApiRoute } from '@/api/main';
+import { ipc } from '@/utils/ipcRenderer';
+
+export default {
+  data() {
+    return {
+      picPath: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'
+    };
+  },
+  methods: {
+    selectPic () {
+      ipc.invoke(ipcApiRoute.selectPic, {}).then(r => {      
+        this.picPath = r;
+      })
+    },
+  }
+};
+</script>
+<style lang="less" scoped>
+#os-file-pic {
+padding: 0px 10px;
+text-align: left;
+width: 100%;
+.one-block-1 {
+    font-size: 16px;
+    padding-top: 10px;
+}
+.one-block-2 {
+    padding-top: 10px;
+}
+}
+</style>
+