2025.1.8 界面

kcui/src/view/Book.vue

@@ -4,6 +4,17 @@
       <div style="background-color: silver;width: 3vw;height: 2vw;line-height: 2vw;text-align: center;" @click="goHome">跳转回去</div>
     </div>
     <div>
+      <el-button type="info" plain icon="el-icon-upload2" size="mini" @click="openFileInput">导入</el-button>
+
+      <input
+          ref="fileInput"
+          type="file"
+          accept=".doc, .docx"
+          style="display: none;"
+          @change="handleFileChange"
+      />
+    </div>
+    <div>
 
 
       aaaaaaaaaaaaaaaaaaa{{num}}
@@ -19,6 +30,7 @@
 </template>
 <script>
 import {getgraphInfo} from "@/api/login";
+import {addFile} from "@/api/file";
 import VisGraph from '@/assets/js/graphvis.min.20241008.js'
 import LayoutFactory from '@/assets/js/graphvis.layout.min.js'
 import {config} from '@/assets/defaultConfig.js'
@@ -38,6 +50,37 @@ export default {
     }
   },
   methods:{
+
+    openFileInput() {
+      // 触发隐藏的文件输入框点击事件
+      this.$refs.fileInput.click();
+    },
+    handleFileChange(event) {
+      const file = event.target.files[0];
+      if (file) {
+        this.uploadFile(file);
+      }
+    },
+    uploadFile(file) {
+      // 调用API函数进行文件上传
+      addFile(file)
+          .then(response => {
+            if (response.code === 200) {
+              this.$message.success('文件上传成功');
+            } else {
+              this.$message.error('文件上传失败');
+            }
+          })
+          .catch(error => {
+            console.error('文件上传错误:', error);
+            this.$message.error('文件上传失败');
+          })
+          .finally(() => {
+            // 清除文件选择框的内容以便下次使用
+            this.$refs.fileInput.value = null;
+          });
+    },
+
     goHome(){
       this.$router.push('/')
     },