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

jiangqiang
1 parent da0ba105
Showing 2 changed files with 19 additions and 8 deletions
yudao-module-infra/yudao-module-infra-biz/src/main/java/cn/iocoder/yudao/module/infra/controller/admin/file/vo/file/FileRespVO.java
yudao-ui-admin/src/views/infra/file/index.vue
@@ -13,6 +13,9 @@ public class FileRespVO {
     @ApiModelProperty(value = "文件编号", required = true, example = "1024")
     private Long id;
  
+    @ApiModelProperty(value = "配置编号", required = true, example = "11")
+    private Long configId;
+
     @ApiModelProperty(value = "文件路径", required = true, example = "yudao.jpg")
     private String path;
  
@@ -31,13 +31,17 @@
       <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="type" width="210" />
-<!--      <el-table-column label="文件内容" align="center" prop="content">-->
-<!--        <template slot-scope="scope">-->
-<!--          <img v-if="scope.row.type&&scope.row.type.indexOf('image/') === 0"-->
-<!--               width="200px" :src="getFileUrl + scope.row.id">-->
-<!--          <i v-else>非图片，无法预览</i>-->
-<!--        </template>-->
-<!--      </el-table-column>-->
+      <el-table-column label="文件内容" align="center" prop="content" min-width="150px">
+        <template slot-scope="scope">
+          <image-preview v-if="scope.row.type&&scope.row.type.indexOf('image/') === 0" :src="scope.row.url"
+                         :width="'100px'"></image-preview>
+          <i v-else>无法预览，点击
+            <el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;"
+                     :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">
         <template slot-scope="scope">
           <span>{{ parseTime(scope.row.createTime) }}</span>
@@ -79,12 +83,16 @@
 <script>
 import { deleteFile, getFilePage } from "@/api/infra/file";
 import {getAccessToken} from "@/utils/auth";
+import ImagePreview from "@/components/ImagePreview";
  
 export default {
   name: "File",
+  components: {
+    ImagePreview
+  },
   data() {
     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,
       // 显示搜索条件