feat：实现文件加解密

upload-file-frontend/src/components/SelectDir/SelectDir.vue

@@ -31,6 +31,7 @@
             <el-radio 
               v-model="selectedPath" 
               @change="handleRadioChange(data)"
+              :disabled="!allowSelectFolder && data.folder"
             ></el-radio>
             <i :class="data.folder ? 'el-icon-folder' : 'el-icon-document'"></i>
             <span>{{ node.label }}</span>
@@ -54,6 +55,10 @@ export default {
     showFiles: {
       type: Boolean,
       default: true
+    },
+    allowSelectFolder: {
+      type: Boolean,
+      default: true
     }
   },
   data() {
@@ -138,6 +143,9 @@ export default {
       }
     },
     handleRadioChange(data) {
+      if (!this.allowSelectFolder && data.folder) {
+        return;
+      }
       this.selectedPath = data.path;
       this.isDropdownVisible = false;
       this.$emit('change', data.path);
@@ -214,4 +222,9 @@ export default {
 .custom-tree-node i.el-icon-document {
   color: #909399;
 }
+
+:deep(.el-radio__label) {
+  width: 0;
+  padding: 0;
+}
 </style> 

upload-file-frontend/src/components/Toolbox/tools/FileEncrypt.vue

@@ -2,26 +2,22 @@
   <div class="file-encrypt-container">
     <el-form :model="form" label-width="100px">
       <!-- 文件上传 -->
-      <el-form-item label="上传文件">
-        <el-upload
-          ref="upload"
-          action=""
-          :http-request="handleUpload"
-          :before-upload="beforeUpload"
-          :multiple="false"
-          :show-file-list="false"
-        >
-          <el-button type="primary">点击上传文件</el-button>
-        </el-upload>
+      <el-form-item label="文件">
+        <SelectDir 
+          v-model="form.file" 
+          @change="handlePathChange"
+          :showFiles="true"
+          :allowSelectFolder="false"
+          style="width: 400px; margin-right: 10px;"
+        />
       </el-form-item>
 
       <!-- 加密密钥 -->
       <el-form-item label="密钥">
         <el-input
           v-model="form.key"
-          placeholder="请输入加密/解密密钥"
-          style="width: 300px;"
-          show-password
+          placeholder="请输入密钥"
+          style="width: 400px;"
         ></el-input>
       </el-form-item>
 
@@ -31,56 +27,34 @@
         <el-button type="warning" @click="decryptFile" :disabled="!form.file || !form.key">解密文件</el-button>
       </el-form-item>
     </el-form>
-
-    <!-- 下载链接 -->
-    <div v-if="downloadUrl" class="download-section">
-      <el-link :href="downloadUrl" type="primary" :download="downloadFileName">点击下载处理后的文件</el-link>
-    </div>
   </div>
 </template>
 
 <script>
 import { encryptFile, decryptFile } from '@/utils/api';
+import SelectDir from '@/components/SelectDir/SelectDir.vue';
 
 export default {
   name: 'FileEncrypt',
+  components: {
+    SelectDir
+  },
   data() {
     return {
       form: {
-        file: null, // 上传的文件对象
+        file: '',
         key: '',
       },
-      downloadUrl: '', // 下载链接
-      downloadFileName: '', // 下载文件名
     };
   },
   methods: {
-    // 文件上传前校验
-    beforeUpload(file) {
-      this.form.file = file;
-      this.downloadUrl = ''; // 清空之前的下载链接
-      return false; // 阻止默认上传，使用自定义 http-request
-    },
-    // 自定义上传处理
-    async handleUpload(option) {
-      // 文件已通过 beforeUpload 保存到 form.file，无需额外处理
-      console.log('handleUpload', option);
-    },
     // 加密文件
     async encryptFile() {
       if (!this.validateForm()) return;
-
-      const formData = new FormData();
-      formData.append('file', this.form.file);
-      formData.append('key', this.form.key);
-
       try {
-        const res = await encryptFile(formData);
+        const res = await encryptFile(this.form.file, this.form.key);
         if (res.code === 200) {
-          this.handleFileResponse(res.data, this.form.file.name + '.enc');
-          this.$message.success('文件加密成功，请下载');
-        } else {
-          this.$message.error(res.msg || '加密失败');
+          this.$message.success('文件加密成功，请前往目录查看');
         }
       } catch (error) {
         this.$message.error('加密请求失败');
@@ -91,34 +65,20 @@ export default {
     async decryptFile() {
       if (!this.validateForm()) return;
 
-      const formData = new FormData();
-      formData.append('file', this.form.file);
-      formData.append('key', this.form.key);
-
       try {
-        const res = await decryptFile(formData);
+        const res = await decryptFile(this.form.file, this.form.key);
         if (res.code === 200) {
-          const originalName = this.form.file.name.replace('.enc', '');
-          this.handleFileResponse(res.data, originalName);
-          this.$message.success('文件解密成功，请下载');
-        } else {
-          this.$message.error(res.msg || '解密失败');
+          this.$message.success('文件解密成功，请前往目录查看');
         }
       } catch (error) {
         this.$message.error('解密请求失败');
         console.error(error);
       }
     },
-    // 处理后端返回的文件
-    handleFileResponse(blob, fileName) {
-      const url = window.URL.createObjectURL(blob);
-      this.downloadUrl = url;
-      this.downloadFileName = fileName;
-    },
     // 表单校验
     validateForm() {
       if (!this.form.file) {
-        this.$message.warning('请上传文件');
+        this.$message.warning('请选择文件');
         return false;
       }
       if (!this.form.key) {
@@ -133,6 +93,7 @@ export default {
 
 <style scoped>
 .file-encrypt-container {
+  height: 400px;
   padding: 20px;
 }
 

upload-file-frontend/src/components/Toolbox/tools/FileTree.vue

@@ -122,8 +122,6 @@ export default {
             this.updateTextTree();
           });
           this.$message.success('文件树获取成功');
-        } else {
-          this.$message.error(res.msg || '获取文件树失败');
         }
       } catch (error) {
         this.$message.error('请求失败，请检查网络或路径');

upload-file-frontend/src/utils/api.js

@@ -325,6 +325,32 @@ const getFileTree = (path, showFiles, showFolders, maxDepth) => {
     });
 }
 
+/**
+ * 加密文件
+ * @param {string} filePath 
+ * @param {string} password 
+ * @returns 
+ */
+const encryptFile = (filePath, password) => {
+    const formData = new FormData();
+    formData.append('filePath', filePath);
+    formData.append('password', password);
+    return http.post("/localFile/encrypt", formData);
+}
+
+/**
+ * 解密文件
+ * @param {string} filePath 
+ * @param {string} password 
+ * @returns 
+ */
+const decryptFile = (filePath, password) => {
+    const formData = new FormData();
+    formData.append('filePath', filePath);
+    formData.append('password', password);
+    return http.post("/localFile/decrypt", formData);
+}
+
 export {
     getUploadProgress,
     createMultipartUpload,
@@ -350,5 +376,7 @@ export {
     localFileSearch,
     openDir,
     getFileTree,
+    encryptFile,
+    decryptFile,
     httpExtra
 };