在上传素材页面顶部增加面包屑,展示上传目录的路径

src/views/createMaterial/MaterialUpload.vue

 <template>
   <div class="upload-page">
+    <!-- 面包屑导航 -->
+    <el-breadcrumb separator="/" class="breadcrumb">
+      <el-breadcrumb-item>素材管理</el-breadcrumb-item>
+      <el-breadcrumb-item v-for="item in breadcrumbItems" :key="item.id">
+        {{ item.name }}
+      </el-breadcrumb-item>
+    </el-breadcrumb>
+
     <h2>文件上传</h2>
     <el-form ref="uploadForm" :model="uploadForm" label-width="120px">
       <el-form-item label="素材上传">
@@ -106,6 +114,7 @@ export default {
       },
       selectedDirectoryIds: [],
       directories: [],
+      breadcrumbItems: [], // 面包屑数据
       uploadForm: { // 上传视频表单数据
         // file: null,
         successFiles: [],
@@ -200,6 +209,35 @@ export default {
     },
     handleDirectoryChange(value) {
       this.uploadForm.directoryId = value[value.length - 1];
+      this.updateBreadcrumb(value);
+    },
+
+    // 更新面包屑
+    updateBreadcrumb(selectedPath) {
+      if (!selectedPath || selectedPath.length === 0) {
+        this.breadcrumbItems = [];
+        return;
+      }
+
+      // 根据选中的路径构建面包屑
+      this.breadcrumbItems = selectedPath.map(id => {
+        const directory = this.findDirectoryById(id, this.directories);
+        return directory ? { id: directory.id, name: directory.name } : null;
+      }).filter(Boolean);
+    },
+
+    // 递归查找目录
+    findDirectoryById(id, directories) {
+      for (const directory of directories) {
+        if (directory.id === id) {
+          return directory;
+        }
+        if (directory.children) {
+          const found = this.findDirectoryById(id, directory.children);
+          if (found) return found;
+        }
+      }
+      return null;
     },
 
     saveMaterial(){
@@ -240,6 +278,13 @@ export default {
   padding: 20px;
 }
 
+.breadcrumb {
+  margin-bottom: 20px;
+  padding: 10px;
+  background-color: #f5f7fa;
+  border-radius: 4px;
+}
+
 .success-files {
   margin-top: 30px;
 }