求各位指教，想实现文件上传下载预览的功能，前端页面如上图。搜索了很多方法，都各有千秋，在本人这里可能不太实用，本人使用的是axios+springboot+vue实现，想问有无通用方法呢，后端实现与前端对接卡在这里很久了。
1.前端页面
```java
<template>
<el-main>
<!-- 搜索 -->
<el-form
:model="searchParm"
label-width="80px"
:inline="true"
size="default"
>
<el-form-item style="width: 240px">
<el-input
v-model="searchParm.title"
placeholder="请输入标题"
></el-input>
</el-form-item>
<el-form-item label="类型">
<el-select
v-model="searchParm.types"
clearable
placeholder="请选择搜索类型"
style="width: 160px"
>
</el-select>
</el-form-item>
<el-form-item>
<el-button icon="Search" @click="searchBtn">搜索</el-button>
<el-button plain type="danger" icon="Close" @click="resetBtn">重置</el-button>
<el-button type="primary" icon="Plus" @click="addBtn">上传</el-button>
</el-form-item>
</el-form>
<!-- 表格 -->
<el-table :height="tableHeight" :data="tableList" border stripe>
<el-table-column align="center" prop="id" label="id"></el-table-column>
<el-table-column align="center" prop="fileName" label="文件名称"></el-table-column>
<el-table-column align="center" prop="types" label="文件类型"></el-table-column>
<el-table-column align="center" prop="isImg" label="是否为图片"></el-table-column>
<el-table-column align="center" prop="downcounts" label="下载次数"></el-table-column>
<el-table-column prop="createTime" width="103px" label="上传时间"></el-table-column>
<el-table-column align="center" width="240" label="操作">
<template #default="scope">
<el-button
icon="Edit"
type="success"
size="default"
@click="applyBtn(scope.row)"
>预览</el-button>
<el-button
icon="Delete"
type="danger"
size="default"
@click="deleteBtn(scope.row)"
>删除</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<el-pagination
@size-change="sizeChange"
@current-change="currentChange"
:current-page.sync="searchParm.currentPage"
:page-sizes="[10,20, 40, 80, 100]"
:page-size="searchParm.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="searchParm.total" background>
</el-pagination>
</el-main>
</template>
<script setup lang="ts">
import useTableDocument from "@/composable/document/useTableDocument";
import {ref} from "vue";
const {resetBtn,currentChange,sizeChange,searchBtn,tableHeight,tableList,getList,searchParm}=useTableDocument();
</script>
<style scoped>
</style>
表单组件
import {ref} from "vue";
import {nextTick, onMounted, reactive} from "vue";
export default function useTableDocument(){
//表格数据
const tableList = ref([{
id:"1",
fileName:"22.txt",
types:"txt",
isImg:"否",
downcounts:4,
createTime:"2024/5/9",
}])
//定义表格高度
const tableHeight = ref(0)
//搜索栏绑定数据
const searchParm = reactive({
currentPage:1,
pageSize:10,
name:'',
total:0
})
//列表
const getList = ()=>{
}
//页容量改变时触发
const sizeChange = (size:number)=>{
searchParm.pageSize = size
getList()
}
// 页数改变时触发
const currentChange = (page:number)=>{
searchParm.currentPage = page
getList()
}
//搜索
const searchBtn = ()=>{
getList()
}
//重置
const resetBtn = () => {
searchParm.currentPage = 1
searchParm.name = ''
getList()
}
onMounted(()=>{
getList()
nextTick(()=>{
tableHeight.value = window.innerHeight - 200
})
})
return {
tableHeight,
tableList,
getList,
resetBtn,
searchBtn,
currentChange,
sizeChange,
searchParm
}
}
```
