文件上传修改

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

@@ -12,20 +12,18 @@
         :on-change="handleFileChange"
     >
         <!-- 使用file插槽自定义文件列表 -->
-        <template #file="{ file }">
-            <div class="file-item">
-                <HcIcon name="file" class="file-icon" />
-                <span class="file-name">{{ file.name }}</span>
-                <el-button
-                    type="danger"
-                    size="small"
-                    circle
-                    @click.stop="handleRemove(file)"
-                >
-                    <HcIcon name="delete" />
-                </el-button>
-            </div>
-        </template>
+        <!-- 使用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 #trigger>
             <div v-loading="uploadDisabled" :element-loading-text="loadingText" class="hc-upload-loading h-full" @click.stop="beforesubmitUpload">
@@ -48,13 +46,12 @@
 </template>
 
 <script setup>
-import { onMounted, ref, watch } from 'vue'
+import { nextTick, onMounted, ref, watch } from 'vue'
 import { getHeader } from 'hc-vue3-ui'
 import wbsApi from '~api/data-fill/wbs'
 import { isFileSize } from 'js-fast-way'
 import { toPdfPage } from '~uti/btn-auth'
-import { number } from 'echarts'
-
+import draggable from 'vuedraggable'
 const props = defineProps({
     fileList: {
         type: Array,
@@ -166,6 +163,7 @@ const beforeUpload = async (file) => {
     }
 }
 
+
 //超出限制时
 const uploadExceed = () => {
     window?.$message?.warning('请上传 jpg/png/pdf/excel/word 的文件，文件大小 不超过60M')
@@ -181,6 +179,18 @@ 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)
+  if (index !== -1) {
+    fileListData.value.splice(index, 1)
+  }
+}
 //上传中
 const loadingText = ref('上传中...')
 const uploadprogress = () => {
@@ -297,20 +307,21 @@ const submitUpload = async ()=>{
     return
   }
 
-  
-  // 确保所有文件都有sort参数
-  fileListData.value = fileListData.value.map((file, index) => ({
-    ...file,
-    sort: index + q,
+  // 准备文件数据（确保有sort参数）
+  const filesWithSort = fileListData.value.map((file, index) => ({
+    file: file.raw || file, // 源文件
+    sort: index + q, // 排序值
   }))
-  console.log(fileListData.value, ' fileListData.valu222222e')
 
     // 创建 FormData 对象
   const formData = new FormData()
-  fileListData.value.forEach((file, index) => {
-    formData.append('files', file.raw || file, file.name)
-    formData.append('sort', index + q)
-  })
+  // 1. 添加文件数组（JSON格式）
+  formData.append('files', JSON.stringify(
+    filesWithSort.map(item => ({
+      sort: item.sort, 
+      file:item.file,
+    })),
+  ))
 
   // 添加其他必要的上传参数
   formData.append('classify', uploadData.value.classify)