duy 1 місяць тому
батько
коміт
6557147152
1 змінених файлів з 25 додано та 15 видалено
  1. 25 15
      src/views/data-fill/components/HcUpload.vue

+ 25 - 15
src/views/data-fill/components/HcUpload.vue

@@ -12,14 +12,27 @@
         :on-change="handleFileChange"
     >
         <!-- 使用file插槽自定义文件列表 -->
-        <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>
+        <!-- 自定义可拖拽排序的文件列表 -->
+        <draggable
+            v-model="fileListData"
+            item-key="uid"
+            handle=".drag-handle"
+            class="file-list-container"
+            @end="onDragEnd"
+        >
+            <template #item="{ element }">
+                <div class="file-item">
+                    <HcIcon name="menu" class="drag-handle cursor-move" />
+                    <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 #trigger>
             <div v-loading="uploadDisabled" :element-loading-text="loadingText" class="hc-upload-loading h-full" @click.stop="beforesubmitUpload">
@@ -309,15 +322,12 @@ const submitUpload = async () => {
   // 创建 FormData 对象
   const formData = new FormData()
 
-//   // 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')
+  // 1. 追加多个文件(后端接收 files: [二进制, 二进制, ...])
+  fileListData.value.forEach((file) => {
+    formData.append('files', file.raw || file) // 关键:使用相同的字段名 `files`
+  })
 
 
- formData.append('files', filesArr) 
 
   // 2. 添加其他参数
   formData.append('classify', uploadData.value.classify)