上传管理 添加 上传 和 复制 功能

admin/src/pages/config/upload.vue

@@ -8,10 +8,11 @@ import {
   UploadDeleteAction,
   UploadSearchAction,
   UploadListAction,
-  $response, $image
+  $response, $image, $base64, UploadImageAction
 } from '~/api'
 import $router from '~/router'
 import {onBeforeRouteUpdate} from "vue-router";
+import {$copy} from "~/tool/copy";
 
 const default_page_options = {
   search: '',
@@ -102,19 +103,38 @@ const UploadDelete = async () => {
 }
 const deleteClick = () => {
   window.$box.confirm(
-    '是否确认删除该上传文件？',
-    '提示',
-    {
-      confirmButtonText: '确认',
-      cancelButtonText: '取消',
-      type: 'warning',
-    }
+      '是否确认删除该上传文件？',
+      '提示',
+      {
+        confirmButtonText: '确认',
+        cancelButtonText: '取消',
+        type: 'warning',
+      }
   ).then(() => {
     UploadDelete()
   }).catch(() => {
   })
 }
 const image_arr = ['png', 'jpeg', 'jpg', 'gif']
+
+const fileChange = async (e) => {
+  if (e.size > 1024 * 1024 * 2) return window.$message().error('图片大小不能超过2M')
+  await UploadImage(await $base64(e.raw))
+}
+const UploadImage = async (base64) => {
+  const response = await UploadImageAction({
+    base64
+  })
+  $response(response, () => {
+    UploadList()
+  })
+}
+
+const copyLinkClick = (link) => {
+  $copy(link, () => {
+    window.$message().success('复制成功')
+  })
+}
 </script>
 <template>
   <div>
@@ -159,8 +179,22 @@ const image_arr = ['png', 'jpeg', 'jpg', 'gif']
           <el-button my-1 @click="searchClick()" ml-3 type="primary">搜索</el-button>
           <el-button my-1 @click="searchClearClick()" type="warning">清空</el-button>
         </div>
-        <div mt-1>
-          <el-button :disabled="edit_data.id === 0" @click="deleteClick()" type="danger">删除</el-button>
+        <div mt-1 class="button_group_wrapper">
+          <el-dropdown>
+            <el-button type="primary">
+              上传 <el-icon ml-2><Icon type="down"></Icon></el-icon>
+            </el-button>
+            <template #dropdown>
+              <el-dropdown-menu>
+                <el-dropdown-item>
+                  <el-upload :auto-upload="false" :show-file-list="false" @change="fileChange">
+                    上传图片
+                  </el-upload>
+                </el-dropdown-item>
+              </el-dropdown-menu>
+            </template>
+          </el-dropdown>
+          <el-button ml-2 :disabled="edit_data.id === 0" @click="deleteClick()" type="danger">删除</el-button>
         </div>
         <el-table row-class-name="cursor-pointer" mt-2 border :data="table_list" highlight-current-row
                   style="width: 100%"
@@ -168,13 +202,26 @@ const image_arr = ['png', 'jpeg', 'jpg', 'gif']
           <el-table-column type="expand">
             <template #default="props">
               <div v-if="!!props.row.url">
-                <div v-if="image_arr.indexOf(props.row.ext) !== -1" class="table_image_wrapper">
-                  <el-image :preview-src-list="[$image(props.row.url)]" class="image_box_wrapper" fit="contain"
-                            :src="$image(props.row.url)" preview-teleported>
-                    <template #error>
-                      <div class="image_error_wrapper">暂无图片</div>
+                <div v-if="image_arr.indexOf(props.row.ext) !== -1" text-center>
+                  <div class="table_image_wrapper">
+                    <el-image :preview-src-list="[$image(props.row.url)]" class="image_box_wrapper" fit="contain"
+                              :src="$image(props.row.url)" preview-teleported>
+                      <template #error>
+                        <div class="image_error_wrapper">暂无图片</div>
+                      </template>
+                    </el-image>
+                  </div>
+                  <el-dropdown mt-2>
+                    <el-button type="primary">
+                      复制链接 <el-icon ml-2><Icon type="down"></Icon></el-icon>
+                    </el-button>
+                    <template #dropdown>
+                      <el-dropdown-menu>
+                        <el-dropdown-item @click="copyLinkClick($image(props.row.url))">完整链接</el-dropdown-item>
+                        <el-dropdown-item @click="copyLinkClick(props.row.url)">不带域名</el-dropdown-item>
+                      </el-dropdown-menu>
                     </template>
-                  </el-image>
+                  </el-dropdown>
                 </div>
                 <div class="no_preview_wrapper" v-else>暂无预览</div>
               </div>
@@ -231,6 +278,10 @@ const image_arr = ['png', 'jpeg', 'jpg', 'gif']
   transform: translate(-50%, -50%);
   color: #333333;
 }
+
+.button_group_wrapper {
+  display: flex;
+}
 </style>
 <route>
 {"meta":{"title":"上传管理"}}