fix : 修复细节

src/components/FileUpload.vue

@@ -6,15 +6,37 @@
              with-credentials
              :multiple="maxSize > 0"
              :data="uploadParams"
+             :show-file-list="false"
              :auto-upload="true"
              :before-upload="beforeUpload"
              :on-success="handleUploadSuccess"
-             :before-remove="beforeRemove"
-             :on-remove="handleRemoveAttachment"
-             @handleRemove="handleRemove1"
   >
+<!--    :before-remove="beforeRemove"-->
+<!--    :on-remove="handleRemoveAttachment"-->
+<!--    @handleRemove="handleRemove1"-->
     <el-button color="#DED0B2">上传文件</el-button>
   </el-upload>
+  <div v-if="showTable||fileList.length!==0">
+    <el-table :data="fileList" style="width: 100%">
+      <el-table-column fixed prop="originalFilename" label="文件名" />
+      <el-table-column fixed prop="fileType" label="文件类型" />
+      <el-table-column fixed prop="size" label="文件大小"  >
+        <template #default="scope">
+          {{parseInt(scope.row.size/1024)}}{{parseInt(scope.row.size/1024)>1024?'MB':'KB'}}
+        </template>
+      </el-table-column>
+<!--      <el-table-column fixed prop="url" label="url"  />-->
+      <el-table-column fixed="right" label="操作" >
+        <template #default="scope">
+          <a :href="scope.row.url">
+            下载
+          </a>
+          <el-button link type="primary" size="small" @click="beforeRemove(scope.row)">
+            删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table></div>
 </template>
 
 <script setup>
@@ -29,6 +51,7 @@ const headers = reactive({
   authorization: getToken()
 })
 const disabled = ref(false)
+const showTable = ref(false)
 const uploadParams = ref({})
 const props = defineProps({
   value: {
@@ -55,7 +78,11 @@ const _value = computed({
 })
 
 const beforeUpload = (file) => {
-  if (props.maxSize > 0 && file.size / 1024 / 1024 > props.maxSize) {
+  const FileExt = file.name.replace(/.+\./, "");
+  if (['zip', 'rar','pdf','doc','docx','xlsx'].indexOf(FileExt.toLowerCase()) === -1){
+    ElMessage.warning('请上传后缀名为pdf、doc、docx、xlsx、zip或rar的文件！');
+    return false;
+  } else if (props.maxSize > 0 && file.size / 1024 / 1024 > props.maxSize) {
     ElMessage.warning(`每个文件最大不超过 ${props.maxSize}MB`)
   } else {
     return true
@@ -65,35 +92,30 @@ const handleUploadSuccess = (res, file) => {
   if (res.code !== 1000) {
     ElMessage.error("上传失败")
   }
+  showTable.value=true
   let data = res.data
   fileList.value.push(data)
   emit("getFile", fileList.value)
 }
-const beforeRemove = (file) => {
-  console.log('file.response.data.originalFilename', file.response)
-  return ElMessageBox.confirm(`确认删除名称为${file.response.data.originalFilename}的文件吗?`, '系统提示', {
+const beforeRemove = (row) => {
+  console.log('row',row)
+  // console.log('file.response.data.originalFilename', file.response)
+  ElMessageBox.confirm(`确认删除名称为${row.originalFilename}的表格吗?`, '系统提示', {
     confirmButtonText: '确定',
     cancelButtonText: '取消',
     type: 'warning'
-  }).then(() => true
-      // () => false
-  )
-  // ElMessageBox.confirm(`确认删除名称为${file.response.data.originalFilename}的表格吗?`, '系统提示', {
-  //   confirmButtonText: '确定',
-  //   cancelButtonText: '取消',
-  //   type: 'warning'
-  // }).then(() => {
-  //   return true;
-  // }).catch(()=>{
-  //   ElMessage.warning("用户取消删除! ");
-  //   return false;
-  // })
+  }).then(() => {
+    handleRemove(row)
+  }).catch(()=>{
+    ElMessage.warning("用户取消删除! ");
+    // return false;
+  })
 }
 const handleRemoveAttachment = (file) => {
   handleRemove(file.response.data)
 }
-const handleRemove = (file) => {
-  console.log('fil对对对e', file,fileList.value)
+const handleRemove = (row) => {
+  console.log('fil对对对e',row,fileList.value)
   // "http://43.138.199.198:8888//group1/M00/00/00/CgAICGY_pZKAFiruAAAAAAAAAAA88.docx"
 
   // deleteFile(file.id).then(res => {
@@ -108,3 +130,9 @@ const handleRemove1=()=>{
 }
 </script>
 
+<style lang="scss" scoped>
+a{
+  font-size: 12px;
+  color:#2a99ff;
+}
+</style>