huangge1199/vue-pro
1
0
Fork 0
mirror of https://gitee.com/huangge1199_admin/vue-pro.git synced 2024-11-26 09:11:52 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

文件列表会显示图片缩略图，点击缩略图可以预览大图。非图片文件在列表页面会显示下载按钮。点击即可下载。

Browse Source
This commit is contained in:
jiangqiang 2022-07-08 11:02:21 +08:00
parent da0ba10503
commit eb3228d4c7
2 changed files with 19 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
yudao-module-infra/yudao-module-infra-biz/src/main/java/cn/iocoder/yudao/module/infra/controller/admin/file/vo/file/FileRespVO.java
View File

@ -13,6 +13,9 @@ public class FileRespVO {
@ApiModelProperty(value = "文件编号", required = true, example = "1024") @ApiModelProperty(value = "文件编号", required = true, example = "1024")
private Long id; private Long id;
@ApiModelProperty(value = "配置编号", required = true, example = "11")
private Long configId;
@ApiModelProperty(value = "文件路径", required = true, example = "yudao.jpg") @ApiModelProperty(value = "文件路径", required = true, example = "yudao.jpg")
private String path; private String path;

24
yudao-ui-admin/src/views/infra/file/index.vue
View File

@ -31,13 +31,17 @@
<el-table-column :show-overflow-tooltip="true" label="文件 URL" align="center" min-width="400" prop="url" /> <el-table-column :show-overflow-tooltip="true" label="文件 URL" align="center" min-width="400" prop="url" />
<el-table-column label="文件大小" align="center" prop="size" width="120" :formatter="sizeFormat" /> <el-table-column label="文件大小" align="center" prop="size" width="120" :formatter="sizeFormat" />
<el-table-column label="文件类型" align="center" prop="type" width="210" /> <el-table-column label="文件类型" align="center" prop="type" width="210" />
<!-- <el-table-column label="文件内容" align="center" prop="content">--> <el-table-column label="文件内容" align="center" prop="content" min-width="150px">
<!-- <template slot-scope="scope">--> <template slot-scope="scope">
<!-- <img v-if="scope.row.type&&scope.row.type.indexOf('image/') === 0"--> <image-preview v-if="scope.row.type&&scope.row.type.indexOf('image/') === 0" :src="scope.row.url"
<!-- width="200px" :src="getFileUrl + scope.row.id">--> :width="'100px'"></image-preview>
<!-- <i v-else>非图片，无法预览</i>--> <i v-else>无法预览，点击
<!-- </template>--> <el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;"
<!-- </el-table-column>--> :href="getFileUrl+scope.row.configId+'/get/' + scope.row.path">下载
</el-link>
</i>
</template>
</el-table-column>
<el-table-column label="上传时间" align="center" prop="createTime" width="180"> <el-table-column label="上传时间" align="center" prop="createTime" width="180">
<template slot-scope="scope"> <template slot-scope="scope">
<span>{{ parseTime(scope.row.createTime) }}</span> <span>{{ parseTime(scope.row.createTime) }}</span>
@ -79,12 +83,16 @@
<script> <script>
import { deleteFile, getFilePage } from "@/api/infra/file"; import { deleteFile, getFilePage } from "@/api/infra/file";
import {getAccessToken} from "@/utils/auth"; import {getAccessToken} from "@/utils/auth";
import ImagePreview from "@/components/ImagePreview";
export default { export default {
name: "File", name: "File",
components: {
ImagePreview
},
data() { data() {
return { return {
getFileUrl: process.env.VUE_APP_BASE_API + '/admin-api/infra/file/get/', getFileUrl: process.env.VUE_APP_BASE_API + '/admin-api/infra/file/',
// 遮罩层 // 遮罩层
loading: true, loading: true,
// 显示搜索条件 // 显示搜索条件