上传文件

src/views/data-fill/components/HcUpload.vue

@@ -12,18 +12,14 @@
         :on-change="handleFileChange"
     >
         <!-- 使用file插槽自定义文件列表 -->
-        <!-- 使用draggable组件包裹文件列表 -->
-        <draggable v-model="fileListData" @end="onDragEnd">
-            <template #item="{ element }">
-                <div class="file-item">
-                    <HcIcon name="file" class="file-icon" />
-                    <span class="file-name">{{ element.name }}</span>
-
-                    <HcIcon name="close" class="float-right cursor-pointer text-red" @click.stop="handleRemove(element)" />
-                </div>
-            </template>
-        </draggable>
+        <template #file="{ file }">
+            <div class="file-item">
+                <HcIcon name="file" class="file-icon" />
+                <span class="file-name">{{ file.name }}</span>
 
+                <HcIcon name="close" class="float-right cursor-pointer text-red" @click.stop="handleRemove(file)" />
+            </div>
+        </template>
 
         <template #trigger>
             <div v-loading="uploadDisabled" :element-loading-text="loadingText" class="hc-upload-loading h-full" @click.stop="beforesubmitUpload">
@@ -149,6 +145,8 @@ onMounted(() => {
 //上传前
 const beforeFileNum = ref(0)
 const beforeUpload = async (file) => {
+    console.log(file, 'file111111s')
+    
     if (isFileSize(file?.size, 60)) {
         beforeFileNum.value++
         // 获取当前文件的索引
@@ -179,11 +177,6 @@ const handleFileChange = (file, fileList) => {
     sort: index + q, // 为每个文件添加sort字段
   }))
 }
-// 新增的拖拽结束事件处理函数
-const onDragEnd = (event) => {
-    console.log('拖拽结束', event)
-    // 可以在这里处理拖拽结束后的逻辑，比如更新文件顺序等
-}
 // 手动删除文件
 const handleRemove = (file) => {
   const index = fileListData.value.findIndex(f => f.uid === file.uid)
@@ -301,41 +294,53 @@ const beforesubmitUpload = () => {
 
 
 }
-const submitUpload = async ()=>{
+const submitUpload = async () => {
   if (!typevalue.value && !autoUpload.value) {
     window.$message.warning('请先选择附件类型')
     return
   }
 
-  // 准备文件数据（确保有sort参数）
-  const filesWithSort = fileListData.value.map((file, index) => ({
-    file: file.raw || file, // 源文件
-    sort: index + q, // 排序值
+  // 确保所有文件都有 sort 参数
+  fileListData.value = fileListData.value.map((file, index) => ({
+    ...file,
+    sort: index + q,
   }))
 
-    // 创建 FormData 对象
+  // 创建 FormData 对象
   const formData = new FormData()
 
-  // 2. 单独添加每个文件（保持文件二进制数据）
-  filesWithSort.forEach((item, index) => {
-    formData.append(`file_${index}`, item.file, item.file.name)
-  })
+//   // 1. 添加多个文件（后端接收的是 files[] 数组）
+//   fileListData.value.forEach((file) => {
+//     formData.append('files', file.raw || file) // 确保 file.raw 是 File 对象
+//   })
+let filesArr = fileListData.value.map(file => file.raw || file) // 确保每个文件都是 File 对象
+console.log(filesArr, 'filesArr')
 
-  // 添加其他必要的上传参数
+
+ formData.append('files', filesArr) 
+
+  // 2. 添加其他参数
   formData.append('classify', uploadData.value.classify)
   formData.append('nodeId', uploadData.value.nodeId)
   formData.append('type', uploadData.value.type)
-    formData.append('contractId', uploadData.value.contractId)
-          const { error, code, msg } = await wbsApi.addBussFileNode(formData)
-            uploadDisabled.value = false
-            if (!error && code === 200) {
-                window?.$message?.success('删除成功')
-                return true
-            } else {
-                window?.$message?.error(msg || '操作失败')
-                return false
-            }
-//   uploadRef.value.submit()
+  formData.append('contractId', uploadData.value.contractId)
+
+  // 3. 发送请求
+  try {
+    const { error, code, msg } = await wbsApi.addBussFileNode(formData)
+    uploadDisabled.value = false
+
+    if (!error && code === 200) {
+      window?.$message?.success('上传成功') // 修改 "删除成功" → "上传成功"
+      return true
+    } else {
+      window?.$message?.error(msg || '操作失败')
+      return false
+    }
+  } catch (err) {
+    window?.$message?.error('上传失败，请重试')
+    return false
+  }
 }
 </script>