✨ feat(标签): 标签添加缩略图功能

config/index.js

@@ -4,32 +4,31 @@
  * @Author: zhangjiabao
  * @Date: 2024-01-02 21:12:35
  */
-'use strict'
+"use strict";
 // Template version: 1.2.6
 // see http://vuejs-templates.github.io/webpack for documentation.
 
-const path = require('path')
+const path = require("path");
 
 module.exports = {
   dev: {
-
     // Paths
-    assetsSubDirectory: 'static',
+    assetsSubDirectory: "static",
-    assetsPublicPath: '/',
+    assetsPublicPath: "/",
     proxyTable: {
-      '/': {
+      "/": {
         // target: 'http://39.103.180.196:9011',  // 接口域名
-        // target: 'http://localhost:9011',  // 接口域名
+        target: "http://localhost:9011", // 接口域名
-        target: 'http://testapi.indie.cn:9012', // 接口域名
+        // target: 'http://testapi.indie.cn:9012', // 接口域名
         changeOrigin: true, //是否跨域
         pathRewrite: {
-            '^/': '/'   //需要rewrite重写的,
+          "^/": "/" //需要rewrite重写的,
         }
       }
     },
 
     // Various Dev Server settings
-    host: 'localhost', // can be overwritten by process.env.HOST
+    host: "localhost", // can be overwritten by process.env.HOST
     port: 9528, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
     autoOpenBrowser: true,
     errorOverlay: true,
@@ -49,7 +48,7 @@ module.exports = {
      */
 
     // https://webpack.js.org/configuration/devtool/#development
-    devtool: 'cheap-source-map',
+    devtool: "cheap-source-map",
 
     // If you have problems debugging vue-files in devtools,
     // set this to false - it *may* help
@@ -61,19 +60,19 @@ module.exports = {
     // (https://github.com/webpack/css-loader#sourcemaps)
     // In our experience, they generally work as expected,
     // just be aware of this issue when enabling this option.
-    cssSourceMap: false,
+    cssSourceMap: false
   },
 
   build: {
     // Template for index.html
-    index: path.resolve(__dirname, '../dist/index.html'),
+    index: path.resolve(__dirname, "../dist/index.html"),
 
     // Paths
-    assetsRoot: path.resolve(__dirname, '../dist'),
+    assetsRoot: path.resolve(__dirname, "../dist"),
-    assetsSubDirectory: 'static',
+    assetsSubDirectory: "static",
 
     // you can set by youself according to actual condition
-    assetsPublicPath: './',
+    assetsPublicPath: "./",
 
     /**
      * Source Maps
@@ -81,14 +80,14 @@ module.exports = {
 
     productionSourceMap: false,
     // https://webpack.js.org/configuration/devtool/#production
-    devtool: '#source-map',
+    devtool: "#source-map",
 
     // Gzip off by default as many popular static hosts such as
     // Surge or Netlify already gzip all static assets for you.
     // Before setting to `true`, make sure to:
     // npm install --save-dev compression-webpack-plugin
     productionGzip: false,
-    productionGzipExtensions: ['js', 'css'],
+    productionGzipExtensions: ["js", "css"],
 
     // Run the build command with an extra argument to
     // View the bundle analyzer report after build finishes:
@@ -96,4 +95,4 @@ module.exports = {
     // Set to `true` or `false` to always turn it on or off
     bundleAnalyzerReport: process.env.npm_config_report
   }
-}
+};

src/views/journal/journalModify.vue

@@ -97,6 +97,7 @@
               :limit="1"
               :on-exceed="handleExceed"
               :file-list="songUploadFileList"
+              :headers="uploadHeader"
             >
               <el-button
                 plain

src/views/song/index.vue

@@ -288,6 +288,7 @@
         :on-exceed="handleExceed"
         name="files"
         :file-list="songUploadFileList"
+        :headers="uploadHeader"
       >
         <el-button icon="el-icon-receiving" plain>上传歌曲</el-button>
         <div
@@ -310,11 +311,17 @@
 import tagApi from "@/api/tag";
 import musicApi from "@/api/musicV2";
 import MusicModify from "./musicModify.vue";
+import { getToken } from "@/utils/auth";
 
 export default {
   name: "Song",
   data() {
     return {
+      uploadHeader: {
+        "Admin-Token": getToken(),
+        "X-Token": getToken(),
+        Authorization: getToken()
+      },
       uploadBase: process.env.BASE_API,
       // 查询表单
       queryForm: {

src/views/tag/index.vue

@@ -118,6 +118,16 @@
             {{ scope.$index + 1 }}
           </template>
         </el-table-column>
+        <el-table-column label="图片">
+          <template slot-scope="scope">
+            <img style="height: 50px;" :src="scope.row.image" />
+          </template>
+        </el-table-column>
+        <el-table-column label="缩略图">
+          <template slot-scope="scope">
+            <img style="height: 50px;" :src="scope.row.thumbnail" />
+          </template>
+        </el-table-column>
         <el-table-column label="中文名称" prop="nameCh"></el-table-column>
         <el-table-column label="英文名称" prop="nameEn"></el-table-column>
         <el-table-column
@@ -218,6 +228,7 @@
       :visible="modifyDialog.visible"
       v-if="modifyDialog.visible"
       width="30%"
+      top="50px"
       :before-close="handleDialogBeforeClose"
     >
       <el-form
@@ -265,7 +276,7 @@
         </el-form-item>
         <el-form-item prop="image" label="上传图片">
           <img
-            style="width: 170px;height: 120px;"
+            style="width: 150px;height: 100px;"
             :src="modifyDialog.form.data.image"
           />
           <el-upload
@@ -285,11 +296,34 @@
             >
           </el-upload>
         </el-form-item>
+        <el-form-item prop="thumbnail" label="上传缩略图">
+          <img
+            style="width: 150px;height: 100px;"
+            :src="modifyDialog.form.data.thumbnail"
+          />
+          <el-upload
+            :action="`${uploadBase}/luoo-tag/tag/upload/image`"
+            :headers="uploadHeader"
+            :on-preview="handlePreview"
+            :on-remove="handleRemove"
+            :before-remove="beforeRemove"
+            :on-change="handleUploadTagThumbnailSuccess"
+            multiple
+            :limit="1"
+            :on-exceed="handleExceed"
+            :file-list="modifyDialog.thumbnailUploadFileList"
+          >
+            <el-button size="small" type="primary" icon="el-icon-receiving"
+              >上传缩略图</el-button
+            >
+          </el-upload>
+        </el-form-item>
         <el-form-item label="描述信息" prop="description">
           <el-input
             size="small"
             type="textarea"
             v-model="modifyDialog.form.data.description"
+            rows="6"
           ></el-input>
         </el-form-item>
       </el-form>
@@ -365,10 +399,12 @@ export default {
             nameCh: null,
             nameEn: null,
             image: null,
+            thumbnail: null,
             description: null
           }
         },
-        imageUploadFileList: []
+        imageUploadFileList: [],
+        thumbnailUploadFileList: []
       }
     };
   },
@@ -472,6 +508,17 @@ export default {
         this.modifyDialog.imageUploadFileList = [];
       }
     },
+    handleUploadTagThumbnailSuccess(response, file, fileList) {
+      if (response.status === "success") {
+        if (response.response.code === 200) {
+          this.$message.success("上传成功");
+          this.modifyDialog.form.data.thumbnail = response.response.data;
+        } else {
+          this.$message.error(response.response.message);
+        }
+        this.modifyDialog.thumbnailUploadFileList = [];
+      }
+    },
     // ************************* 按扭事件 *************************
     /**
      * 查询按扭点击事件
@@ -501,6 +548,7 @@ export default {
       this.modifyDialog.form.data.nameCh = null;
       this.modifyDialog.form.data.nameEn = null;
       this.modifyDialog.form.data.image = null;
+      this.modifyDialog.form.data.thumbnail = null;
       this.modifyDialog.form.data.description = null;
 
       this.modifyDialog.type = 0;
@@ -523,6 +571,7 @@ export default {
       this.modifyDialog.form.data.nameCh = row.nameCh;
       this.modifyDialog.form.data.nameEn = row.nameEn;
       this.modifyDialog.form.data.image = row.image;
+      this.modifyDialog.form.data.thumbnail = row.thumbnail;
       this.modifyDialog.form.data.description = row.description;
 
       this.modifyDialog.type = 1;
@@ -538,6 +587,7 @@ export default {
       this.modifyDialog.form.data.nameCh = null;
       this.modifyDialog.form.data.nameEn = null;
       this.modifyDialog.form.data.image = null;
+      this.modifyDialog.form.data.thumbnail = null;
       this.modifyDialog.form.data.description = null;
 
       this.modifyDialog.type = 2;
@@ -587,6 +637,7 @@ export default {
             nameCh: this.modifyDialog.form.data["nameCh"],
             nameEn: this.modifyDialog.form.data["nameEn"],
             image: this.modifyDialog.form.data["image"],
+            thumbnail: this.modifyDialog.form.data["thumbnail"],
             description: this.modifyDialog.form.data["description"],
             parentId:
               this.modifyDialog.form.data["parentId"] === null ||