queyue-frontend
/
luoo_manage_fe
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
dev
zhangjiabao 7 months ago
parent f45f030ea0
commit 635a5dc3f9
4 changed files with 82 additions and 24 deletions
Show Stats Download Patch File Download Diff File

43
config/index.js
Unescape View File

@ -1,35 +1,34 @@
/*
* @Description:
* @Description:
* @version: v1
* @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',
assetsPublicPath: '/',
assetsSubDirectory: "static",
assetsPublicPath: "/",
proxyTable: {
'/': {
"/": {
// target: 'http://39.103.180.196:9011', // 接口域名
// target: 'http://localhost:9011', // 接口域名
target: 'http://testapi.indie.cn:9012', // 接口域名
changeOrigin: true, //是否跨域
target: "http://localhost:9011", // 接口域名
// 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'),
assetsSubDirectory: 'static',
assetsRoot: path.resolve(__dirname, "../dist"),
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
}
}
};

1
src/views/journal/journalModify.vue
Unescape View File

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

7
src/views/song/index.vue
Unescape View File

@ -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: {

55
src/views/tag/index.vue
Unescape View File

@ -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 ||

Write Preview
Loading…
Cancel
Save