修复漏洞，重构初始化功能，优化媒体库 (#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/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>