修复漏洞，重构初始化功能，优化媒体库 (#1024)

* 媒体库增加 普通上传、压缩上传按钮，方便媒体库直接上传图片

* 增加数据类型切换后的的校验，避免使用错误的查询条件和字典条件。

* refactor: 重构初始化逻辑

* 媒体库功能丰富

* 修复注入漏洞和路径穿越

* 修复自动化接口获取数据库表失败后未能终止的bug

* 微调媒体库样式

Co-authored-by: bypanghu <bypanghu@163.com>
Co-authored-by: tesun <36953434+tesun@users.noreply.github.com>
Co-authored-by: pnck <hio131@gmail.com>
Co-authored-by: task <121913992@qq.com>

web/src/api/fileUploadAndDownload.js

@@ -29,3 +29,16 @@ export const deleteFile = (data) => {
     data
   })
 }
+
+/**
+ * 编辑文件名或者备注
+ * @param data
+ * @returns {*}
+ */
+export const editFileName = (data) => {
+  return service({
+    url: '/fileUploadAndDownload/editFileName',
+    method: 'post',
+    data
+  })
+}

web/src/components/chooseImg/index.vue

@@ -1,56 +1,97 @@
 <template>
-  <el-drawer v-model="drawer" title="媒体库">
+  <el-drawer v-model="drawer" title="媒体库" size="650px">
     <div class="gva-btn-list">
       <upload-common
-          v-model:imageCommon="imageCommon"
-          class="upload-btn-media-library"
-          @on-success="open"
+        v-model:imageCommon="imageCommon"
+        class="upload-btn-media-library"
+        @on-success="open"
       />
       <upload-image
-          v-model:imageUrl="imageUrl"
-          :file-size="512"
-          :max-w-h="1080"
-          class="upload-btn-media-library"
-          @on-success="open"
+        v-model:imageUrl="imageUrl"
+        :file-size="512"
+        :max-w-h="1080"
+        class="upload-btn-media-library"
+        @on-success="open"
       />
+      <el-form ref="searchForm" :inline="true" :model="search">
+        <el-form-item label="">
+          <el-input v-model="search.keyword" class="keyword" placeholder="请输入文件名或备注" />
+        </el-form-item>
+
+        <el-form-item>
+          <el-button size="small" type="primary" icon="search" @click="open">查询</el-button>
+        </el-form-item>
+      </el-form>
     </div>
     <div class="media">
-      <el-image
-        v-for="(item,key) in picList"
-        :key="key"
-        class="header-img-box-list"
-        :src="(item.url && item.url.slice(0, 4) !== 'http')?path+item.url:item.url"
-        @click="chooseImg(item.url,target,targetKey)"
-      >
-        <template #error>
-          <div class="header-img-box-list">
-            <el-icon><picture /></el-icon>
-          </div>
-        </template>
-      </el-image>
+      <div v-for="(item,key) in picList" :key="key" class="media-box">
+        <div class="header-img-box-list">
+          <el-image
+            :key="key"
+            :src="(item.url && item.url.slice(0, 4) !== 'http')?path+item.url:item.url"
+            @click="chooseImg(item.url,target,targetKey)"
+          >
+            <template #error>
+              <div class="header-img-box-list">
+                <el-icon>
+                  <picture />
+                </el-icon>
+              </div>
+            </template>
+          </el-image>
+        </div>
+        <div class="img-title" @click="editFileNameFunc(item)">{{ item.name }}</div>
+      </div>
     </div>
+    <el-pagination
+      :current-page="page"
+      :page-size="pageSize"
+      :total="total"
+      :style="{'justify-content':'center'}"
+      layout="total, prev, pager, next, jumper"
+      @current-change="handleCurrentChange"
+      @size-change="handleSizeChange"
+    />
   </el-drawer>
 </template>
 
 <script setup>
 import { ref } from 'vue'
-import { getFileList } from '@/api/fileUploadAndDownload'
+import { getFileList, editFileName } from '@/api/fileUploadAndDownload'
 import UploadImage from '@/components/upload/image.vue'
 import UploadCommon from '@/components/upload/common.vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
 
 const imageUrl = ref('')
 const imageCommon = ref('')
 
+const search = ref({})
+const page = ref(1)
+const total = ref(0)
+const pageSize = ref(20)
+const keyword = ref('')
+
+// 分页
+const handleSizeChange = (val) => {
+  pageSize.value = val
+  open()
+}
+
+const handleCurrentChange = (val) => {
+  page.value = val
+  open()
+}
+
 const emit = defineEmits(['enterImg'])
 defineProps({
   target: {
     type: Object,
-    default: null
+    default: null,
   },
   targetKey: {
     type: String,
-    default: ''
-  }
+    default: '',
+  },
 })
 
 const drawer = ref(false)
@@ -66,30 +107,89 @@ const chooseImg = (url, target, targetKey) => {
 }
 
 const open = async() => {
-  const res = await getFileList({ page: 1, pageSize: 9999 })
-  picList.value = res.data.list
-  drawer.value = true
+  const res = await getFileList({ page: page.value, pageSize: pageSize.value, ...search.value })
+  if (res.code === 0) {
+    picList.value = res.data.list
+    total.value = res.data.total
+    page.value = res.data.page
+    pageSize.value = res.data.pageSize
+    drawer.value = true
+  }
+}
+
+/**
+ * 编辑文件名或者备注
+ * @param row
+ * @returns {Promise<void>}
+ */
+const editFileNameFunc = async(row) => {
+  ElMessageBox.prompt('请输入文件名或者备注', '编辑', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    inputPattern: /\S/,
+    inputErrorMessage: '不能为空'
+  }).then(async({ value }) => {
+    row.name = value
+    // console.log(row)
+    const res = await editFileName(row)
+    if (res.code === 0) {
+      ElMessage({
+        type: 'success',
+        message: '编辑成功!',
+      })
+      open()
+    }
+  }).catch(() => {
+    ElMessage({
+      type: 'info',
+      message: '取消修改'
+    })
+  })
 }
 
 defineExpose({ open })
 </script>
 
 <style lang="scss">
-.upload-btn-media-library{margin-left: 20px;}
-.media{
-  display:flex;
-  flex-wrap:wrap;
-  .header-img-box-list {
-    margin-top: 20px;
+.upload-btn-media-library {
+  margin-left: 20px;
+}
+
+.media {
+  display: flex;
+  flex-wrap: wrap;
+
+  .media-box {
     width: 120px;
     margin-left: 20px;
-    height: 120px;
-    border: 1px dashed #ccc;
-    border-radius: 20px;
-    text-align: center;
-    line-height: 180px;
-    cursor: pointer;
-}
+
+    .img-title {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      line-height: 36px;
+      text-align: center;
+      cursor: pointer;
+    }
+
+    .header-img-box-list {
+      width: 120px;
+      height: 120px;
+      border: 1px dashed #ccc;
+      border-radius: 8px;
+      text-align: center;
+      line-height: 120px;
+      cursor: pointer;
+      overflow: hidden;
+      .el-image__inner {
+        max-width: 120px;
+        max-height: 120px;
+        vertical-align: middle;
+        width: unset;
+        height: unset;
+      }
+    }
+  }
 }
 
 </style>

web/src/style/base.scss

@@ -58,3 +58,8 @@
 .title-3 {
     text-align: center;
 }
+
+.keyword{
+  width: 220px;
+  margin: 0 0 0 30px;
+}

web/src/view/example/upload/upload.vue

@@ -6,20 +6,32 @@
             v-model:imageCommon="imageCommon"
             class="upload-btn"
             @on-success="getTableData"
-          />
-        <upload-image
-          v-model:imageUrl="imageUrl"
-          :file-size="512"
-          :max-w-h="1080"
-          class="upload-btn"
-          @on-success="getTableData"
         />
+        <upload-image
+            v-model:imageUrl="imageUrl"
+            :file-size="512"
+            :max-w-h="1080"
+            class="upload-btn"
+            @on-success="getTableData"
+        />
+
+
+        <el-form ref="searchForm" :inline="true" :model="search">
+          <el-form-item label="">
+            <el-input v-model="search.keyword" class="keyword" placeholder="请输入文件名或备注"/>
+          </el-form-item>
+
+          <el-form-item>
+            <el-button size="small" type="primary" icon="search" @click="getTableData">查询</el-button>
+          </el-form-item>
+        </el-form>
+
       </div>
 
       <el-table :data="tableData">
         <el-table-column align="left" label="预览" width="100">
           <template #default="scope">
-            <CustomPic pic-type="file" :pic-src="scope.row.url" />
+            <CustomPic pic-type="file" :pic-src="scope.row.url"/>
           </template>
         </el-table-column>
         <el-table-column align="left" label="日期" prop="UpdatedAt" width="180">
@@ -27,14 +39,19 @@
             <div>{{ formatDate(scope.row.UpdatedAt) }}</div>
           </template>
         </el-table-column>
-        <el-table-column align="left" label="文件名" prop="name" width="180" />
-        <el-table-column align="left" label="链接" prop="url" min-width="300" />
+        <el-table-column align="left" label="文件名/备注" prop="name" width="180">
+          <template #default="scope">
+            <div class="name" @click="editFileNameFunc(scope.row)">{{scope.row.name}}</div>
+          </template>
+        </el-table-column>
+        <el-table-column align="left" label="链接" prop="url" min-width="300"/>
         <el-table-column align="left" label="标签" prop="tag" width="100">
           <template #default="scope">
             <el-tag
-              :type="scope.row.tag === 'jpg' ? 'primary' : 'success'"
-              disable-transitions
-            >{{ scope.row.tag }}</el-tag>
+                :type="scope.row.tag === 'jpg' ? 'primary' : 'success'"
+                disable-transitions
+            >{{ scope.row.tag }}
+            </el-tag>
           </template>
         </el-table-column>
         <el-table-column align="left" label="操作" width="160">
@@ -46,14 +63,14 @@
       </el-table>
       <div class="gva-pagination">
         <el-pagination
-          :current-page="page"
-          :page-size="pageSize"
-          :page-sizes="[10, 30, 50, 100]"
-          :style="{ float: 'right', padding: '20px' }"
-          :total="total"
-          layout="total, sizes, prev, pager, next, jumper"
-          @current-change="handleCurrentChange"
-          @size-change="handleSizeChange"
+            :current-page="page"
+            :page-size="pageSize"
+            :page-sizes="[10, 30, 50, 100]"
+            :style="{ float: 'right', padding: '20px' }"
+            :total="total"
+            layout="total, sizes, prev, pager, next, jumper"
+            @current-change="handleCurrentChange"
+            @size-change="handleSizeChange"
         />
       </div>
     </div>
@@ -61,7 +78,7 @@
 </template>
 
 <script setup>
-import { getFileList, deleteFile } from '@/api/fileUploadAndDownload'
+import { getFileList, deleteFile, editFileName } from '@/api/fileUploadAndDownload'
 import { downloadImage } from '@/utils/downloadImg'
 import { useUserStore } from '@/pinia/modules/user'
 import CustomPic from '@/components/customPic/index.vue'
@@ -81,6 +98,7 @@ const imageCommon = ref('')
 const page = ref(1)
 const total = ref(0)
 const pageSize = ref(10)
+const search = ref({})
 const tableData = ref([])
 
 // 分页
@@ -96,7 +114,7 @@ const handleCurrentChange = (val) => {
 
 // 查询
 const getTableData = async() => {
-  const table = await getFileList({ page: page.value, pageSize: pageSize.value })
+  const table = await getFileList({ page: page.value, pageSize: pageSize.value, ...search.value })
   if (table.code === 0) {
     tableData.value = table.data.list
     total.value = table.data.total
@@ -110,27 +128,27 @@ const deleteFileFunc = async(row) => {
   ElMessageBox.confirm('此操作将永久文件, 是否继续?', '提示', {
     confirmButtonText: '确定',
     cancelButtonText: '取消',
-    type: 'warning'
+    type: 'warning',
   })
-    .then(async() => {
-      const res = await deleteFile(row)
-      if (res.code === 0) {
-        ElMessage({
-          type: 'success',
-          message: '删除成功!'
-        })
-        if (tableData.value.length === 1 && page.value > 1) {
-          page.value--
+      .then(async() => {
+        const res = await deleteFile(row)
+        if (res.code === 0) {
+          ElMessage({
+            type: 'success',
+            message: '删除成功!',
+          })
+          if (tableData.value.length === 1 && page.value > 1) {
+            page.value--
+          }
+          getTableData()
         }
-        getTableData()
-      }
-    })
-    .catch(() => {
-      ElMessage({
-        type: 'info',
-        message: '已取消删除'
       })
-    })
+      .catch(() => {
+        ElMessage({
+          type: 'info',
+          message: '已取消删除',
+        })
+      })
 }
 
 const downloadFile = (row) => {
@@ -141,16 +159,48 @@ const downloadFile = (row) => {
   }
 }
 
+/**
+ * 编辑文件名或者备注
+ * @param row
+ * @returns {Promise<void>}
+ */
+const editFileNameFunc = async(row) => {
+  ElMessageBox.prompt('请输入文件名或者备注', '编辑', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    inputPattern: /\S/,
+    inputErrorMessage: '不能为空'
+  }).then(async({ value }) => {
+    row.name = value;
+    //console.log(row)
+    const res = await editFileName(row)
+    if (res.code === 0) {
+      ElMessage({
+        type: 'success',
+        message: '编辑成功!',
+      })
+      getTableData()
+    }
+  }).catch(() => {
+    ElMessage({
+      type: 'info',
+      message: '取消修改'
+    });
+  });
+}
 </script>
 
 <script>
 
 export default {
-  name: 'Upload'
+  name: 'Upload',
 }
 </script>
 <style scoped>
-.upload-btn+.upload-btn {
-            margin-left: 12px;
-        }
+.name{
+  cursor: pointer;
+}
+.upload-btn + .upload-btn {
+  margin-left: 12px;
+}
 </style>