feat: 支持上传下载文件

opentdp · Nov 30, 2023 · e3c00ad · e3c00ad
1 parent 05357fc
commit e3c00ad
Show file tree

Hide file tree

Showing 2 changed files with 89 additions and 37 deletions.
diff --git a/src/apps/machine/filer.vue b/src/apps/machine/filer.vue
@@ -1,6 +1,8 @@
 <script lang="ts">
 import { Component, Vue } from "vue-facing-decorator"
 
+import { UploadFile, RequestMethodResponse } from "tdesign-vue-next"
+
 import { NaApi } from "@/api"
 import { MachineModels, MachineItem } from "@/api/native/machine"
 import { FileInfo } from "@/api/native/typings"
@@ -67,21 +69,55 @@ export default class MachineFiler extends Vue {
         this.loading = true
         this.fileList = []
         const req = { Action: 'ls', Path: this.path }
-        const res = await NaApi.workhub.filer(this.machine.WorkerId, req)
+        const res = await NaApi.workhub.filer(this.machine.WorkerId, req).finally(() => {
+            this.loading = false
+        })
         if (res.FileList && res.FileList.length > 0) {
             this.fileList = res.FileList
         }
-        this.loading = false
     }
 
     // 获取文件数据
 
     async getFileData(name: string) {
         this.loading = true
         const req = { Action: 'read', Path: this.path + '/' + name }
-        const res = await NaApi.workhub.filer(this.machine.WorkerId, req)
-        gobyte.byteArrayStringToFile(res.FileData + "", name)
-        this.loading = false
+        const res = await NaApi.workhub.filer(this.machine.WorkerId, req).finally(() => {
+            this.loading = false
+        })
+        gobyte.base64ToDownload(res.FileData + "", name)
+    }
+
+    // 上传文件
+
+    async uploadFile(file: UploadFile) {
+        if (file.raw) {
+            gobyte.fileToBase64(file.raw, async res => {
+                const req = {
+                    Action: 'write',
+                    Path: this.path + '/' + file.name,
+                    File: { Data: res }
+                }
+                await NaApi.workhub.filer(this.machine.WorkerId, req)
+                await this.getFileList()
+            })
+        }
+        const data: RequestMethodResponse = {
+            status: 'success',
+            response: {}
+        }
+        return Promise.resolve(data)
+    }
+
+    // 删除文件
+
+    async deleteFile(name: string) {
+        this.loading = true
+        const req = { Action: 'rm', Path: this.path + '/' + name }
+        await NaApi.workhub.filer(this.machine.WorkerId, req).finally(() => {
+            this.loading = false
+        })
+        await this.getFileList()
     }
 
     // 表格定义
@@ -91,6 +127,7 @@ export default class MachineFiler extends Vue {
         { colKey: 'Size', title: '大小', ellipsis: true },
         { colKey: 'Mode', title: '权限', ellipsis: true },
         { colKey: 'ModTime', title: '修改时间', ellipsis: true },
+        { colKey: 'Operation', title: '操作', width: "110px" }
     ]
 }
 </script>
@@ -113,6 +150,17 @@ export default class MachineFiler extends Vue {
             <template #subtitle>
                 文件总数: {{ fileList.length }}
             </template>
+            <template #actions>
+                <t-space>
+                    <t-upload :request-method="uploadFile" />
+                    <t-button theme="primary" @click="getFileList()">
+                        <template #icon>
+                            <t-icon name="load" />
+                        </template>
+                        刷新
+                    </t-button>
+                </t-space>
+            </template>
             <t-space fixed direction="vertical">
                 <t-breadcrumb>
                     <t-breadcrumb-item v-if="machine?.OSType != 'windows'" @click="setPath('/')">
@@ -124,19 +172,27 @@ export default class MachineFiler extends Vue {
                 </t-breadcrumb>
                 <t-table :data="fileList" :columns="tableColumns" row-key="Id" hover>
                     <template #Name="{ row }">
-                        <div v-if="row.IsDir" class="hover" @click="setPath(path + '/' + row.Name)">
-                            {{ row.Name }}/
-                        </div>
-                        <div v-else class="hover" @click="getFileData(row.Name)">
-                            {{ row.Name }}
-                        </div>
+                        {{ row.Name }}{{ row.IsDir ? '/' : '' }}
                     </template>
                     <template #Size="{ row }">
                         {{ row.IsDir ? '-' : bytesToSize(row.Size) }}
                     </template>
                     <template #ModTime="{ row }">
                         {{ dateFormat(row.ModTime * 1000, "yyyy-MM-dd hh:mm:ss") }}
                     </template>
+                    <template #Operation="{ row }">
+                        <t-link v-if="row.IsDir" theme="primary" hover="color" @click="setPath(path + '/' + row.Name)">
+                            浏览
+                        </t-link>
+                        <t-link v-else theme="success" hover="color" @click="getFileData(row.Name)">
+                            下载
+                        </t-link>
+                        <t-popconfirm content="确定删除?" @confirm="deleteFile(row.Name)">
+                            <t-link theme="danger" hover="color">
+                                删除
+                            </t-link>
+                        </t-popconfirm>
+                    </template>
                 </t-table>
             </t-space>
         </t-card>

diff --git a/src/helper/gobyte.ts b/src/helper/gobyte.ts
@@ -2,44 +2,40 @@
  * go byte array helper
  */
 
-// 解析go的[]byte序列化值
-export function decodeByteArray(data: string) {
-    const rawString = atob(data)
-    const byteArray = new Uint8Array(rawString.length)
-    for (let i = 0; i < rawString.length; i++) {
-        byteArray[i] = rawString.charCodeAt(i)
+// 将Base64字符串转换为Uint8Array
+export function base64ToBuffer(data: string) {
+    const binstr = atob(data)
+    const bytes = new Uint8Array(binstr.length)
+    for (let i = 0; i < binstr.length; i++) {
+        bytes[i] = binstr.charCodeAt(i)
     }
-    return byteArray
+    return bytes
 }
 
-// 编码为go的[]byte序列化值
-export function encodeByteArray(data: Uint8Array) {
-    const byteArray = Array.prototype.slice.call(data)
-    const rawString = String.fromCharCode.apply(null, byteArray)
-    return btoa(rawString)
-}
-
-// 将Uint8Array转换为字符串
-export function byteArrayToText(data: string) {
-    const decoder = new TextDecoder('utf8')
-    return decoder.decode(decodeByteArray(data))
+// 将Uint8Array转换为Base64字符串
+export function bufferToBase64(data: Uint8Array) {
+    const binstr = Array.prototype.map.call(data, ch => {
+        return String.fromCharCode(ch)
+    }).join('')
+    return btoa(binstr)
 }
 
 // 将File转为go的[]byte序列化值
-export function fileToByteArrayString(file: File, fn: (data: string) => void) {
+export function fileToBase64(file: File, fn: (data: string) => void) {
     const reader = new FileReader()
-    reader.onload = function () {
-        const byteArray = new Uint8Array(reader.result as ArrayBuffer)
-        const base64String = encodeByteArray(byteArray)
-        fn && fn(base64String)
+    reader.onload = () => {
+        const bytes = new Uint8Array(reader.result as ArrayBuffer)
+        fn && fn(bufferToBase64(bytes))
     }
     reader.readAsArrayBuffer(file)
 }
 
 // 将go的[]byte序列化值转为下载
-export function byteArrayStringToFile(input: string, filename: string) {
-    const data = decodeByteArray(input)
-    const blob = new Blob([data], { type: "application/octet-stream" })
+export function base64ToDownload(input: string, filename: string) {
+    const data = base64ToBuffer(input)
+    const blob = new Blob([data], {
+        type: "application/octet-stream"
+    })
     const url = URL.createObjectURL(blob)
     // 创建一个隐藏的a元素
     const a = document.createElement("a")