上传文件demo

README.md

@@ -16,7 +16,7 @@
 - 🍩 **Why?** desktop software ( office direction , personal tools ), still Yes PC in the next ten years one of the requirements is to improve work efficiency
 - 🍉 **Simple：** just understand JavaScript
 - 🍑 **Vision：** all developers can learn how to develop desktop software
-- 🍰 **Gitee：** https://gitee.com/wallace5303/electron-egg **2000+**
+- 🍰 **Gitee：** https://gitee.com/wallace5303/electron-egg **2200+**
 - 🍨 **Github：** https://github.com/wallace5303/electron-egg **500+**
 - 🏆 most valuable open source project
     ![](https://wallace5303.gitee.io/ee/images/electron-egg/ee-zs.png)    

README.zh-CN.md

@@ -16,7 +16,7 @@
 - 🍩 **为什么使用？** 桌面软件（办公方向、 个人工具），仍然是未来十几年PC端需求之一，提高工作效率
 - 🍉 **简单：** 只需懂 JavaScript
 - 🍑 **愿景：** 所有开发者都能学会桌面软件研发
-- 🍰 **gitee：** https://gitee.com/wallace5303/electron-egg **2000+**
+- 🍰 **gitee：** https://gitee.com/wallace5303/electron-egg **2200+**
 - 🍨 **github：** https://github.com/wallace5303/electron-egg **500+**
 - 🏆 码云最有价值开源项目
     ![](https://wallace5303.gitee.io/ee/images/electron-egg/ee-zs.png)    

electron/config/config.default.js

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

electron/controller/example.js

@@ -496,27 +496,6 @@ class ExampleController extends Controller {
   }
 
   /**
-   * 上传文件
-   */  
-  async uploadFile() {
-    // const self = this;
-    // const { ctx, service } = this;
-    // let tmpDir = Utils.getLogDir();
-    // const file = ctx.request.files[0];
-
-    // try {
-    //   let tmpFile = fs.readFileSync(file.filepath)
-    //   fs.writeFileSync(path.join(tmpDir, file.filename), tmpFile)
-    // } finally {
-    //   await fs.unlink(file.filepath, function(){});
-    // }
-    // const fileStream = fs.createReadStream(path.join(tmpDir, file.filename))
-    // const uploadRes = await service.example.uploadFileToSMMS(fileStream);
-
-    // return uploadRes;
-  }
-
-  /**
    * 检测http服务是否开启
    */ 
   async checkHttpServer () {
@@ -623,6 +602,27 @@ class ExampleController extends Controller {
   }
 
   /**
+   * 上传文件
+   */  
+  async uploadFile() {
+    let tmpDir = Utils.getLogDir();
+    const files = this.app.request.files;
+    let file = files.file;
+    
+    let tmpFilePath = path.join(tmpDir, file.originalFilename);
+    try {
+      let tmpFile = fs.readFileSync(file.filepath);
+      fs.writeFileSync(tmpFilePath, tmpFile);
+    } finally {
+      await fs.unlink(file.filepath, function(){});
+    }
+    const fileStream = fs.createReadStream(tmpFilePath);
+    const uploadRes = await this.service.example.uploadFileToSMMS(fileStream);
+
+    return uploadRes;
+  }
+
+  /**
    * 测试接口
    */ 
   hello (args) {

electron/service/example.js

@@ -23,6 +23,45 @@ class ExampleService extends Service {
 
     return obj;
   }
+
+  /**
+   * 上传到smms
+   */
+  async uploadFileToSMMS(tmpFile) {
+    const res = {
+      code: 1000,
+      message: 'unknown error',
+    };
+
+    try {
+      const headersObj = {
+        'Content-Type': 'multipart/form-data',
+        'Authorization': 'aaaaaaaaaaaaa' // 请修改这个token，用你自己的账号token
+      };
+      const url = 'https://sm.ms/api/v2/upload';
+      const response = await this.app.curl(url, {
+        method: 'POST',
+        headers: headersObj,
+        files: {
+          smfile: tmpFile,
+        },
+        dataType: 'json',
+        timeout: 15000,
+      });
+      const result = response.data;
+      if (this.app.config.env === 'local') {
+        this.app.logger.info('[ExampleService] [uploadFileToSMMS]: info result:%j', result);
+      }
+      if (result.code !== 'success') {
+        this.app.logger.error('[ExampleService] [uploadFileToSMMS]: res error result:%j', result);
+      }
+      return result;
+    } catch (e) {
+      this.app.logger.error('[ExampleService] [uploadFileToSMMS]:  ERROR ', e);
+    }
+
+    return res;
+  }    
 }
 
 ExampleService.toString = () => '[class ExampleService]';

frontend/src/views/base/file/Index.vue

@@ -1,13 +1,5 @@
 <template>
   <div id="app-base-file">
-    <div class="one-block-2">
-      <a-list v-if="image_info.length !== 0" size="small" bordered :data-source="image_info">
-        <a-list-item slot="renderItem" slot-scope="item" style="text-align:left;">
-          {{ item.id }}.&nbsp;{{ item.imageUrlText }}:&nbsp;
-          <a :href="item.url" target="_blank">{{ item.url }}</a>
-        </a-list-item>
-      </a-list>
-    </div>
     <div class="one-block-1">
       <span>
         1. 系统原生对话框
@@ -38,7 +30,7 @@
     </div>      
     <div class="one-block-1">
       <span>
-        4. 打开文件夹
+        3. 打开文件夹
       </span>
     </div>  
     <div class="one-block-2">
@@ -52,11 +44,35 @@
         </a-list-item>
       </a-list>
     </div>
+    <div class="one-block-1">
+      <span>
+        4. 上传文件到图床
+      </span>
+    </div>  
+    <div class="one-block-2">
+      <a-upload-dragger
+        name="file"
+        :multiple="true"
+        :action="action_url"
+        @change="handleFileChange"
+      >
+        <p class="ant-upload-drag-icon">
+          <a-icon type="inbox" />
+        </p>
+        <p class="ant-upload-text">
+          点击 或 拖拽文件到这里
+        </p>
+        <p class="ant-upload-hint">
+          注意：请使用您自己的图床token
+        </p>
+      </a-upload-dragger>
+    </div>
     <div class="footer">
     </div>
   </div>
 </template>
 <script>
+import storage from 'store2'
 import { ipcApiRoute } from '@/api/main'
 
 const fileList = [
@@ -82,12 +98,33 @@ export default {
   data() {
     return {
       file_list: fileList,
+      action_url: '',
       image_info: [],
       num: 0,
+      servicAddress: '',
 			dir_path: "D:\\www\\ee",
     };
   },
+  mounted () {
+    this.getHost();
+  },
   methods: {
+    getHost () {
+      const self = this;
+      this.$ipcInvoke(ipcApiRoute.checkHttpServer, {}).then(r => {
+        if (r.enable) {
+          self.servicAddress = r.server;
+          storage.set('httpServiceConfig', r);
+
+          // url转换
+          const host = r.server || 'http://127.0.0.1:7071';
+          let uri = ipcApiRoute.uploadFile;
+          let url = uri.split('.').join('/');
+          this.action_url = host + '/' + url;
+        }
+        console.log('action_url:', this.action_url);
+      })
+    },
     openDirectry (id) {
       this.$ipcInvoke(ipcApiRoute.openDirectory, {id: id}).then(res => {
         //console.log('res:', res)
@@ -114,6 +151,33 @@ export default {
         self.$message.info(r);
       })
     },
+    handleFileChange(info) {
+      console.log('handleFileChange-----');
+      if (this.action_url == '') {
+        this.$message.error('http服务未开启');
+        return;
+      }
+      const status = info.file.status;
+      if (status !== 'uploading') {
+        console.log(info.file);
+      }
+      if (status === 'done') {
+        const uploadRes = info.file.response;
+        console.log('uploadRes:', uploadRes)
+        if (uploadRes.code !== 'success') {
+          this.$message.error(`file upload failed ${uploadRes.code} .`);
+          return false;
+        }
+        this.num++;
+        const picInfo = uploadRes.data;
+        picInfo.id = this.num;
+        picInfo.imageUrlText = 'image url';
+        this.image_info.push(picInfo);
+        this.$message.success(`${info.file.name} file uploaded successfully.`);
+      } else if (status === 'error') {
+        this.$message.error(`${info.file.name} file upload failed.`);
+      }
+    },
   }
 };
 </script>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ee",
-  "version": "2.2.1",
+  "version": "2.2.2",
   "description": "A fast, desktop software development framework",
   "main": "main.js",
   "scripts": {