文件上传修复

urbanLifelineWeb/packages/shared/src/components/fileupload/FileUpload.vue

@@ -169,6 +169,8 @@ interface Props {
 	maxCount?: number
 	title?: string
 	buttonText?: string
+	// 是否自动上传，默认 true，设为 false 时需要手动调用 uploadFiles
+	autoUpload?: boolean
 	// 自定义上传函数，如果提供则使用外部实现，否则使用默认上传逻辑
 	customUpload?: (files: File[]) => Promise<TbSysFileDTO[] | void>
 }
@@ -181,6 +183,7 @@ const props = withDefaults(defineProps<Props>(), {
 	maxCount: 10,
 	title: '文件上传',
 	buttonText: '上传文件',
+	autoUpload: true,
 	customUpload: undefined
 })
 
@@ -234,7 +237,7 @@ const handleDrop = (event: DragEvent) => {
 		addFiles(Array.from(files))
 
 		// cover模式和content模式下拖拽文件后立即上传
-		if (props.mode === 'cover' || props.mode === 'content') {
+		if (props.autoUpload && (props.mode === 'cover' || props.mode === 'content')) {
 			uploadFiles()
 		}
 	}
@@ -321,8 +324,8 @@ const handleFileSelect = (event: Event) => {
 	// 清空 input，允许重复选择同一文件
 	target.value = ''
 
-	// cover模式和content模式下选择文件后立即上传
-	if (props.mode === 'cover' || props.mode === 'content') {
+	// cover模式和content模式下，如果 autoUpload 为 true 则立即上传
+	if (props.autoUpload && (props.mode === 'cover' || props.mode === 'content')) {
 		uploadFiles()
 	}
 }

urbanLifelineWeb/packages/workcase/src/views/admin/knowledge/KnowLedgeView.vue

@@ -1,7 +1,7 @@
 <template>
     <AdminLayout title="知识库管理" info="管理外部和内部知识库文档">
         <template #action>
-            <el-button type="primary" @click="showUploadDialog = true">
+            <el-button type="primary" @click="openUploadDialog">
                 <el-icon><Upload /></el-icon>
                 上传文档
             </el-button>
@@ -68,42 +68,18 @@
             </el-card>
         </div>
 
-        <!-- 上传文档弹窗 -->
-        <el-dialog v-model="showUploadDialog" title="上传文档" width="500px">
-            <el-form :model="uploadForm" label-width="80px">
-                <el-form-item label="知识库" required>
-                    <el-select v-model="uploadForm.knowledgeId" placeholder="请选择知识库" style="width: 100%">
-                        <el-option
-                            v-for="kb in knowledges"
-                            :key="kb.knowledgeId"
-                            :label="kb.title"
-                            :value="kb.knowledgeId"
-                        />
-                    </el-select>
-                </el-form-item>
-                <el-form-item label="文件" required>
-                    <el-upload
-                        action="#"
-                        :auto-upload="false"
-                        :on-change="handleFileChange"
-                        :limit="1"
-                        drag
-                    >
-                        <el-icon class="el-icon--upload"><Upload /></el-icon>
-                        <div class="el-upload__text">
-                            拖拽文件到此或 <em>点击上传</em>
-                        </div>
-                        <template #tip>
-                            <div class="el-upload__tip">支持 PDF、Word、TXT 等文档格式</div>
-                        </template>
-                    </el-upload>
-                </el-form-item>
-            </el-form>
-            <template #footer>
-                <el-button @click="showUploadDialog = false">取消</el-button>
-                <el-button type="primary" @click="handleUpload" :loading="uploading">上传</el-button>
-            </template>
-        </el-dialog>
+        <!-- 上传文档组件 -->
+        <FileUpload
+            ref="fileUploadRef"
+            mode="dialog"
+            :title="'上传文档到：' + currentKnowledgeName"
+            button-text="上传文档"
+            accept=".pdf,.doc,.docx,.txt,.md"
+            :max-size="50 * 1024 * 1024"
+            :max-count="10"
+            :custom-upload="customKnowledgeUpload"
+            @upload-error="handleUploadError"
+        />
     </AdminLayout>
 </template>
 
@@ -111,8 +87,9 @@
 import { ref, computed, onMounted, watch } from 'vue'
 import AdminLayout from '@/views/admin/AdminLayout.vue'
 import { Upload, Search, Document, View, Download, Delete } from '@element-plus/icons-vue'
-import { ElMessage, ElMessageBox, type UploadFile } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
 import { aiKnowledgeAPI } from 'shared/api/ai'
+import { FileUpload } from 'shared/components'
 import type { TbKnowledge } from 'shared/types'
 
 // Tab 配置
@@ -123,9 +100,8 @@ const tabConfig = [
 
 const activeTab = ref('external')
 const searchKeyword = ref('')
-const showUploadDialog = ref(false)
 const loading = ref(false)
-const uploading = ref(false)
+const fileUploadRef = ref<InstanceType<typeof FileUpload> | null>(null)
 
 // 知识库列表
 const knowledges = ref<TbKnowledge[]>([])
@@ -146,11 +122,6 @@ interface DocumentItem {
 }
 const documents = ref<DocumentItem[]>([])
 
-const uploadForm = ref({
-    knowledgeId: '',
-    file: null as File | null
-})
-
 // 当前 Tab 配置
 const currentTabConfig = computed(() => tabConfig.find(t => t.name === activeTab.value) || tabConfig[0])
 const currentTabDesc = computed(() => currentTabConfig.value.desc)
@@ -285,45 +256,50 @@ const deleteFile = async (row: DocumentItem) => {
     }
 }
 
-const handleFileChange = (uploadFile: UploadFile) => {
-    uploadForm.value.file = uploadFile.raw || null
-}
-
-const handleUpload = async () => {
-    if (!uploadForm.value.knowledgeId) {
-        ElMessage.error('请选择知识库')
-        return
+// 自定义知识库文件上传
+const customKnowledgeUpload = async (files: File[]) => {
+    if (!activeKnowledgeId.value) {
+        ElMessage.error('请先选择知识库')
+        throw new Error('请先选择知识库')
     }
-    if (!uploadForm.value.file) {
-        ElMessage.error('请选择要上传的文件')
-        return
-    }
-    const targetKnowledgeId = uploadForm.value.knowledgeId
-    uploading.value = true
-    try {
-        const result = await aiKnowledgeAPI.uploadToKnowledge(
-            uploadForm.value.file,
-            targetKnowledgeId
-        )
+    const targetKnowledgeId = activeKnowledgeId.value
+    
+    // 单文件上传
+    if (files.length === 1) {
+        const result = await aiKnowledgeAPI.uploadToKnowledge(files[0], targetKnowledgeId)
         if (result.success) {
             ElMessage.success('文件上传成功')
-            showUploadDialog.value = false
-            uploadForm.value = { knowledgeId: '', file: null }
             fetchKnowledges()
-            if (targetKnowledgeId === activeKnowledgeId.value) {
-                fetchDocuments(activeKnowledgeId.value)
-            }
+            fetchDocuments(activeKnowledgeId.value)
         } else {
-            ElMessage.error(result.message || '上传失败')
+            throw new Error(result.message || '上传失败')
+        }
+    } else {
+        // 批量上传
+        const result = await aiKnowledgeAPI.batchUploadToKnowledge(files, targetKnowledgeId)
+        if (result.success) {
+            ElMessage.success('文件上传成功')
+            fetchKnowledges()
+            fetchDocuments(activeKnowledgeId.value)
+        } else {
+            throw new Error(result.message || '上传失败')
         }
-    } catch (error) {
-        console.error('上传文件失败:', error)
-        ElMessage.error('上传文件失败')
-    } finally {
-        uploading.value = false
     }
 }
 
+const handleUploadError = (error: string) => {
+    ElMessage.error(error)
+}
+
+// 打开上传弹窗
+const openUploadDialog = () => {
+    if (!activeKnowledgeId.value) {
+        ElMessage.warning('请先选择一个知识库')
+        return
+    }
+    fileUploadRef.value?.openDialog()
+}
+
 onMounted(() => {
     fetchKnowledges()
 })