Merge branch 'master' into patch-fix-tab

.vscode/settings.json

@@ -2,5 +2,6 @@
         "editor.wordSegmenterLocales": null,
         "editor.language.brackets": [
 
-        ]
+        ],
+        "editor.detectIndentation": false
 }

backend/src/api/ApiUpload.ts

@@ -0,0 +1,14 @@
+import fs from "fs/promises";
+import { ApiCall } from "tsrpc";
+import { ReqUpload, ResUpload } from "../shared/protocols/PtlUpload";
+
+export async function ApiUpload(call: ApiCall<ReqUpload, ResUpload>) {
+    // Write to file, or push to remote OSS...
+    // 这里需要写实际的保存路径，在本地测试，加上/是绝对路径，不加是相对路径
+    // 注意，需要先创建 uploads 文件夹（已创建）
+    await fs.writeFile('uploads/' + call.req.fileName, call.req.fileData);
+
+    call.succ({
+        url: 'http://127.0.0.1:3000/uploads' + call.req.fileName
+    });
+}

backend/src/shared/protocols/PtlUpload.ts

@@ -0,0 +1,8 @@
+export interface ReqUpload {
+        fileName: string,
+        fileData: Uint8Array
+    }
+
+    export interface ResUpload {
+        url: string;
+    }

backend/src/shared/protocols/serviceProto.ts

@@ -9,6 +9,7 @@ import { ReqUpdateUser, ResUpdateUser } from './database/PtlUpdateUser';
 import { ReqClear, ResClear } from './PtlClear';
 import { ReqSetCookie, ResSetCookie } from './PtlSetCookie';
 import { ReqSetSession, ResSetSession } from './PtlSetSession';
+import { ReqUpload, ResUpload } from './PtlUpload';
 import { MsgExpire } from './user/MsgExpire';
 import { ReqLogin, ResLogin } from './user/PtlLogin';
 import { ReqLogout, ResLogout } from './user/PtlLogout';
@@ -55,6 +56,10 @@ export interface ServiceType {
             req: ReqSetSession,
             res: ResSetSession
         },
+        "Upload": {
+            req: ReqUpload,
+            res: ResUpload
+        },
         "user/Login": {
             req: ReqLogin,
             res: ResLogin
@@ -70,7 +75,7 @@ export interface ServiceType {
 }
 
 export const serviceProto: ServiceProto<ServiceType> = {
-    "version": 7,
+    "version": 8,
     "services": [
         {
             "id": 5,
@@ -140,6 +145,11 @@ export const serviceProto: ServiceProto<ServiceType> = {
             "name": "SetSession",
             "type": "api"
         },
+        {
+            "id": 15,
+            "name": "Upload",
+            "type": "api"
+        },
         {
             "id": 10,
             "name": "user/Expire",
@@ -568,6 +578,38 @@ export const serviceProto: ServiceProto<ServiceType> = {
                 }
             ]
         },
+        "PtlUpload/ReqUpload": {
+            "type": "Interface",
+            "properties": [
+                {
+                    "id": 0,
+                    "name": "fileName",
+                    "type": {
+                        "type": "String"
+                    }
+                },
+                {
+                    "id": 1,
+                    "name": "fileData",
+                    "type": {
+                        "type": "Buffer",
+                        "arrayType": "Uint8Array"
+                    }
+                }
+            ]
+        },
+        "PtlUpload/ResUpload": {
+            "type": "Interface",
+            "properties": [
+                {
+                    "id": 0,
+                    "name": "url",
+                    "type": {
+                        "type": "String"
+                    }
+                }
+            ]
+        },
         "user/MsgExpire/MsgExpire": {
             "type": "Interface",
             "properties": [

backend/uploads/example.txt

@@ -0,0 +1 @@
+此文件夹用来存放客户端上传的文件

frontend/src/App.vue

@@ -35,6 +35,7 @@
       </a-layout>
       <a-layout-footer>
         <Statusbar />
+        <FileUpload />
       </a-layout-footer>
     </div>
     </a-layout>
@@ -50,6 +51,7 @@ import SideMenu from './components/SideMenu.vue';
 import Search from './components/Search.vue';
 import HeadPortrait from './components/HeadPortrait.vue';
 import Notepad from './components/Notepad.vue';
+import FileUpload from './components/FileUpload.vue';
 import { client } from './client';
 
 export default {
@@ -64,6 +66,7 @@ export default {
     Search,
     HeadPortrait, // 头像组件
     Notepad, // 记事本组件
+    FileUpload,
   },
   data() {
     return {

frontend/src/client.ts

@@ -7,7 +7,7 @@ import { ResLogin } from "./shared/protocols/user/PtlLogin";
  */
 export const client = new WsClient(serviceProto, {
     // 这里要换成自己的ip地址
-    server: 'ws://192.168.17.131:3000',
+    server: 'ws://192.168.0.154:3000',
     logger: console,
     json: true,
 });

frontend/src/components/FileUpload.vue

@@ -0,0 +1,66 @@
+<template>
+    <div>
+    <a-upload
+    action="/"
+    @before-upload="beforeUpload"
+    :auto-upload="false"
+    ref="uploadRef"
+    >
+    <template #upload-button>
+        <a-space>
+          <a-button> select file</a-button>
+
+        </a-space>
+      </template>
+    </a-upload><a-button type="primary" @click="customRequest"> start upload</a-button>
+  </div>
+</template>
+
+<script>
+    import { client } from '@/client';
+    export default {
+        data() {
+    return {
+    };
+  },
+  methods: {
+    beforeUpload(file) {
+        client.logger.info('beforeUpload', file);
+        client.logger.info('beforeUpload', this.file);
+      this.file = file; // 在这里获取到文件对象，并保存在data属性中
+      return false; // 阻止文件自动上传
+    },
+    async customRequest() {
+        client.logger.info('customRequest', this.file);
+      if (!this.file) {
+        this.$message.error('Please select a file');
+        return;
+      }
+
+      let fileData = await this.loadFile(this.file);
+      client.logger.info('fileData', fileData);
+      let ret = await client.callApi('Upload', {
+        fileData: fileData,
+        fileName: this.file.name
+      });
+
+      if (!ret.isSucc) {
+        this.$message.error(ret.err.message);
+        client.logger.error('Upload fail', ret.err);
+        return;
+      }
+      client.logger.info('Upload successfully', ret.isSucc);
+      this.$message.success('Upload successfully!');
+    },
+    loadFile(file) {
+      return new Promise(rs => {
+        let reader = new FileReader();
+        reader.onload = e => {
+          rs(new Uint8Array(e.target.result));
+        }
+        reader.readAsArrayBuffer(file);
+      })
+    }
+  }
+}
+</script>