hjq/aircraft-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

添加前端运行基本路径，新增平台管理（文章管理）和修改素材管理交互逻辑，修改wangeditor富文本编辑器封装组件

Browse Source
This commit is contained in:
Double-_-Z 2025-07-13 20:24:15 +08:00
parent 5424a94fa5
commit db5f4071ec
7 changed files with 612 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.env.development
View File

@ -6,6 +6,7 @@ VUE_APP_BASE_API = 'http://8.138.171.103/aerocraftAdminApi'
# VUE_APP_BASE_API = 'https://eladmin.vip'
# VUE_APP_WS_API = 'ws://localhost:8000'
VUE_APP_WS_API = 'wss://eladmin.vip'
# 运行基本路径
VUE_APP_BASE_PATH = 'http://localhost:8013'
# 是否启用 babel-plugin-dynamic-import-node插件
VUE_CLI_BABEL_TRANSPILE_MODULES = true

2
.env.production
View File

@ -3,5 +3,7 @@ ENV = 'production'
# 如果使用 Nginx 代理后端接口，那么此处需要改为 '/'，文件查看 Docker 部署篇，Nginx 配置
# 接口地址，注意协议，如果你没有配置 ssl，需要将 https 改为 http
VUE_APP_BASE_API = 'http://8.138.171.103/aerocraftAdminApi'
# 运行基本路径
VUE_APP_BASE_PATH = 'http://8.138.171.103/aerocraftAdmin'
# 如果接口是 http 形式， wss 需要改为 ws
VUE_APP_WS_API = 'wss://eladmin.vip'

63
src/components/WangEditor/index.vue
View File

@ -1,14 +1,18 @@
<template>
<div ref="editor" style="border: 1px solid #ccc;">
<div ref="editor" style="border: 1px solid #ccc;z-index: 1001;">
<Toolbar
v-if="!disable"
style="border-bottom: 1px solid #ccc"
:editor="editor"
:default-config="toolbarConfig"
:mode="editMode"
/>
<div v-else class="replace" v-if="disableShowFullscreen">
<i class="full el-icon-full-screen" @click="openCurrenFullscreen" />
</div>
<Editor
v-model="editValue"
:style="{'height': editorHeight +'px', 'overflow-y': 'hidden'}"
:style="{'height': editorHeight +'px', 'overflow-y': 'hidden','background-color': '#fff'}"
:default-config="editorConfig"
:mode="editMode"
@onCreated="onCreated"
@ -25,6 +29,11 @@ export default {
name: 'WangEditor',
components: { Toolbar, Editor },
props: {
// 是否禁用
disable: {
type: Boolean,
default: () => false,
},
value: {
type: String,
required: false,
@ -34,13 +43,18 @@ export default {
type: Number,
required: false,
default: 420
}
},
// 是否隐藏藏全屏按钮
disableShowFullscreen: {
type: Boolean,
default: true,
},
},
data() {
const _this = this
return {
toolbarConfig: {},
editorConfig: { placeholder: '请输入内容...', MENU_CONF: {
editorConfig: { placeholder: '请输入内容...', readOnly: this.disable, MENU_CONF: {
'uploadImage': {
// 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
allowedFileTypes: ['image/*'],
@ -55,9 +69,10 @@ export default {
}
}
}},
editMode: 'simple',
editMode: 'default',
editor: null,
editValue: null
editValue: null,
isFull: false,
}
},
computed: {
@ -69,25 +84,53 @@ export default {
watch: {
editValue(newVal, oldVal) {
this.$emit('input', newVal)
}
},
},
mounted() {
},
methods: {
onCreated(editor) {
this.editor = Object.seal(editor)
this.editValue = this.value
},
// 全屏
openCurrenFullscreen() {
const editor = this.editor; // 获取 editor ，必须等待它渲染完之后
if (editor == null) return;
this.isFull ? editor.unFullScreen() : editor.fullScreen();
this.isFull = !this.isFull;
}
}
}
</script>
<style src="@wangeditor/editor/dist/css/style.css"></style>
<style scoped>
<style scoped lang="scss">
.text {
text-align:left;
}
::v-deep .w-e-text-container {
height: 420px !important;
height: 500px !important;
}
::v-deep .w-e-text-placeholder{
top: 5px !important;
}
.replace{
background-color: #ffffff;
border-top: 1px solid #e4e7ed;
border-left: 1px solid #e4e7ed;
border-right: 1px solid #e4e7ed;
display: flex;
justify-content: flex-end;
.full{
font-size: 20px;
padding: 5px 5px 0;
cursor: pointer;
&:hover{
opacity: 0.8;
}
&:active{
opacity: 0.6;
}
}
}
</style>

272
src/views/platform/article/add.vue Normal file
View File

@ -0,0 +1,272 @@
<template>
<div class="app-container">
<el-card v-loading="loading" shadow="hover" header="文章详情">
<el-form ref="articleFormRef" :model="form" :rules="rules" size="large" label-width="100px" class="article-form">
<el-row :gutter="35">
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
<el-form-item label="封面：" class="coverImg" prop="fileArray">
<!-- 上传文件 -->
<el-upload ref="uploadRef" class="h100 personal-user-left-upload" action="#" list-type="picture-card" :file-list="form.fileArray"
:auto-upload="false" :limit="1" :class="{ disabled: coverHide }" :on-change="handleUploadChange" accept='image/*'>
<template #default><i class="el-icon-plus" /></template>
<template #file="{ file }">
<div>
<img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
<span class="el-upload-list__item-actions">
<span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
<i class="el-icon-zoom-in" />
</span>
<span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
<i class="el-icon-delete" />
</span>
</span>
</div>
</template>
</el-upload>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
<el-form-item label="模块名称：" prop="moduleName">
<el-select size="default" @change="handleChangeModule" v-model="form.moduleName" placeholder="请选择模块" clearable>
<el-option :data-op="item.id" v-for="(item,index) in moduleList" :key="index" :label="item.moduleName" :value="item.moduleName"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
<el-form-item label="标签名称：" prop="labelName">
<el-select size="default" v-model="form.labelName" placeholder="请选择标签" clearable class="ml10">
<el-option v-for="(item,index) in labelList" :key="index" :label="item.name" :value="item.name"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
<el-form-item label="标题：" prop="title">
<el-input v-model.trim="form.title" placeholder="请输入标题" clearable></el-input>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
<el-form-item label="文章类型：" prop="articletype">
<el-select size="default" v-model="form.articletype" placeholder="请选择文章类型" clearable>
<el-option label="图文" :value="0"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
<el-form-item label="是否置顶：" prop="top">
<el-switch v-model="form.top" />
</el-form-item>
</el-col>
</el-row>
<el-form-item prop="text" label-width="0px">
<wang-editor v-model="form.text" :editorHeight="500" style="width: 100%;overflow-y: hidden;" />
</el-form-item>
<el-row class="article-btns">
<div style="width: 100%;display: flex;justify-content: flex-end;">
<el-button class="el-icon-refresh-left" size="larger" type="info" @click="cancel">
取消
</el-button>
<el-button class="el-icon-edit" size="larger" type="primary" @click="onSubmitForm">
保存
</el-button>
</div>
</el-row>
</el-form>
</el-card>
<!-- 封面预览弹窗 -->
<el-dialog :visible.sync="dialogVisible">
<img width="100%" w-full :src="dialogImageUrl" alt="预览" />
</el-dialog>
</div>
</template>
<script>
import WangEditor from '@/components/WangEditor/index'
export default {
name: 'ArticleAdd',
name: 'ArticleEdit',
components: {
WangEditor
},
data() {
// 自定义验证
const validText = (rule, value, callback) => {
const val = value.replace(/<[^<p>]+>/g, '') // 将所有<p>标签 replace ''
.replace(/<[</p>$]+>/g, '') // 将所有</p>标签 replace ''
.replace(/&nbsp;/gi, '') // 将所有 空格 replace ''
.replace(/<[^<br/>]+>/g, ''); // 将所有 换行符 replace ''
if (!val) {
callback(new Error('请输入文章内容'))
} else if (/^[ ]+$/.test(val)) {
callback(new Error('请输入文章内容'))
} else {
callback()
}
}
return {
loading: false,
form:{
labelName: '',
moduleName: '',
title: '',
articletype: '',
photo: '',
text: '',
top: false,// 是否置顶，这里提交的时候要换成0或1
fileArray:[]// 编辑进来时，如果已经上传了图片，则保存图片地址
},
// 模块列表
moduleList:[
{ moduleName: '景区', moduleName: '景区' },
{ moduleName: '新闻', moduleName: '新闻' },
{ moduleName: '活动', moduleName: '活动' },
{ moduleName: '其他', moduleName: '其他' }
],
// 标签列表
labelList: [],
rules:{
moduleName: { required: true, message: '请选择模块', trigger: 'change' },
labelName: { required: true, message: '请输入标签名称', trigger: 'blur' },
title: { required: true, message: '请输入标题', trigger: 'blur' },
articletype: { required: true, message: '请选择文章类型', trigger: 'change' },
top: { required: true, message: '请选择是否置顶', trigger: 'blur' },
text: { required: true, trigger: 'blur', validator: validText },
fileArray: { required: true, message: '请上传封面图', trigger: 'change' },
},
coverFile: {},
coverHide: false,
dialogImageUrl: '',
dialogVisible: false,
// 封面上传禁用
disabled: false,
}
},
created(){
const { moduleName, labelName, id } = this.$route.query;
if(moduleName && labelName && this.$route.path == '/platform/article/edit') {
this.getArticleDetailById(id);
}
},
methods: {
// 封面图片更改
handleUploadChange(uploadFile, uploadFiles) {
if(uploadFile.raw.type.includes('image')){
const file = uploadFile.raw;
this.coverFile = file;
this.coverHide = true;
this.form.fileArray = uploadFiles;
}else{
this.$message.error('请上传图片文件！');
this.$refs['uploadRef'].clearFiles();
}
},
// 封面删除
handleRemove(file) {
this.coverFile = {};
this.$refs['uploadRef'].clearFiles();
this.coverHide = false;
},
// 封面预览
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},
// 模块选择
async handleChangeModule(val) {
try {
this.form.labelName = '';
if(!val){this.labelList=[]; return;}
this.labelList = [{name: '测试'},{name: '测试2'}];
// const op = event?.currentTarget;
// let res = await artApi.getLabelList(op.dataset.op);
// if(res?.success){
// labelList.value = res.data;
// }else{
// ElMessage.error('标签列表获取失败！');
// }
} catch (error) {
this.$message.error('标签列表获取失败！');
} finally {
}
},
// 获取文章详情-根据id
async getArticleDetailById(id){
try {
this.loading = true;
// let res = await artApi.getArticleDetail(id);
// if(res?.success) {
// state.data = res.data;
// // 下面这里处理一下，因为后端返回的是0和1，而前端需要的是true和false，到时候提交的时候再转换回来
// state.data.top = state.data.top === 1;
// state.data.moduleName = moduleName;
// state.data.labelName = labelName;
// state.data.textid = state.data.id;
// if(state.data.photo){
// const never = [{name:state.data.title,url:viteUrl+state.data.photo}];
// state.fileArray = never;
// state.coverHide = true;
// }
// }
const { moduleName, labelName } = this.$route.query;
this.form = {
moduleName: moduleName,
labelName: labelName,
title: '测试标题',
articletype: 0,
photo: 'https://huyun120.cn/fd/health/img/%E7%BB%84%20319@2x.f0767b46.png',
text: '测试内容',
top: false,
fileArray:[{name:'测试标题',url:'https://huyun120.cn/fd/health/img/%E7%BB%84%20319@2x.f0767b46.png'}]
};
this.coverHide = true;
} catch (error) {
this.$message.error('获取文章详情失败');
} finally {
this.loading = false;
}
},
// 返回
cancel(){
this.$store.dispatch('tagsView/delView', this.$route);
this.$router.push('/platform/article');
},
// 保存
onSubmitForm(){
console.log(this.form.text);
this.$refs['articleFormRef'].validate(async(valid) => {
if (valid) {
// let res = await this.$http.post('/api/article/add', this.articleForm);
// if(res.code == 200){
this.$message.success('文章添加成功！');
this.cancel();
// }
}else{
this.$message.error('请完善信息！');
}
})
},
}
}
</script>
<style scoped lang="scss">
.article-form{
margin: 20px 0;
}
.coverImg{
&::v-deep .disabled{
.el-upload--picture-card{
display: none;
}
}
&::v-deep .el-upload--picture-card,::v-deep .el-upload-list__item{
display: flex;
align-items: center;
justify-content: center;
width: 130px;
height: 130px;
}
}
.article-btns{
display: flex;
margin-top: 15px;
}
</style>

116
src/views/platform/article/detail.vue Normal file
View File

@ -0,0 +1,116 @@
<template>
<div class="app-container">
<el-card v-loading="loading" shadow="hover" header="文章详情">
<el-form :model="data" size="large" label-width="100px" class="article-form">
<el-row :gutter="35">
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
<el-form-item label="封面：">
<el-image
style="width: 130px;height: 130px;border-radius: 4px;"
:src="data.photo"
:zoom-rate="1.2"
:preview-src-list="[data.photo]"
fit="cover"/>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
<el-form-item label="模块名称：" prop="moduleName">
{{ data.moduleName }}
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
<el-form-item label="标签名称：" prop="labelName">
{{ data.labelName }}
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
<el-form-item label="标题：" prop="title">
{{ data.title }}
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
<el-form-item label="文章类型：" prop="articletype">
图文
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
<el-form-item label="是否置顶：" prop="top">
<el-tag type="success" v-if="data.top===1">是</el-tag>
<el-tag type="error" v-else>否</el-tag>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
<el-form-item label="浏览数：">
{{ data.view }}
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
<el-form-item label="创建日期：">
{{ data.createtime }}
</el-form-item>
</el-col>
</el-row>
<el-form-item prop="text" label-width="0px">
<wang-editor v-model="data.text" :editorHeight="500"
style="width: 100%;overflow-y: hidden;" :disable="true"/>
</el-form-item>
<el-row class="article-btns">
<div style="width: 100%;display: flex;justify-content: flex-end;">
<el-button class="el-icon-refresh-left" size="larger" type="info" @click="cancel">
取消
</el-button>
</div>
</el-row>
</el-form>
</el-card>
</div>
</template>
<script>
import WangEditor from '@/components/WangEditor/index'
export default {
name: 'ArticleDetail',
components: {
WangEditor
},
data(){
return{
data: {
labelName: '',
moduleName: '',
title: '测试',
articletype: 0,
createtime: '2025-01-23',
photo: 'https://huyun120.cn/fd/health/img/%E7%BB%84%20319@2x.f0767b46.png',
text: '测试',
top: 1,
view: 17,
},
loading: false,
}
},
created(){
const { moduleName, labelName, id } = this.$route.query;
// if(moduleName && labelName && this.$route.path == '/platform/article/edit') {
// this.getArticleDetailById(id);
// }
this.data.moduleName = moduleName;
this.data.labelName = labelName;
},
methods: {
// 返回
cancel(){
this.$store.dispatch('tagsView/delView', this.$route);
this.$router.push('/platform/article');
},
}
}
</script>
<style scoped lang="scss">
.article-form{
margin: 20px 0;
}
.article-btns{
display: flex;
margin-top: 15px;
}
</style>

146
src/views/platform/article/index.vue
View File

@ -1,10 +1,150 @@
<template>
<div>
123
<div class="app-container">
<!--工具栏-->
<div class="head-container">
<div>
<!-- 搜索 -->
<el-select v-model="query.moduleName" placeholder="请选择模块" clearable size="small" class="filter-item"
style="width: 200px">
<el-option v-for="(item,index) in modules" :key="index" :label="item.label" :value="item.value" />
</el-select>
<el-select v-model="query.labelName" placeholder="请选择标签" clearable size="small" class="filter-item"
style="width: 200px">
<el-option v-for="(item,index) in labels" :key="index" :label="item.label" :value="item.value" />
</el-select>
<el-input v-model="query.title" clearable size="small" placeholder="请输入标题" style="width: 200px;"
class="filter-item" @keyup.enter.native="crud.toQuery"/>
<rrOperation />
<el-button v-permission="permission.add" class="filter-item" size="mini" type="primary"
icon="el-icon-plus" @click="toAddArticle">
新增{{ crud.title }}
</el-button>
</div>
</div>
<!--表格渲染-->
<el-table ref="table" v-loading="crud.loading" :data="crud.data" style="width: 100%;">
<el-table-column type="index" align="center" width="55" label="序号" />
<el-table-column :show-overflow-tooltip="true" prop="title" label="标题" align="center" />
<el-table-column :show-overflow-tooltip="true" prop="articletype" label="文章类型" align="center" />
<el-table-column :show-overflow-tooltip="true" prop="top" label="置顶" align="center">
<template slot-scope="scope">
<el-tag v-if="scope.row.top===1" type="success">是</el-tag>
<el-tag v-else type="danger">否</el-tag>
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" prop="moduleName" label="模块名称" align="center" />
<el-table-column :show-overflow-tooltip="true" prop="labelName" label="标签名称" align="center" />
<el-table-column :show-overflow-tooltip="true" label="链接" align="center" min-width="80">
<template slot-scope="scope">
<el-button size="mini" style="border-radius: 10px;" @click="copyLink(scope.row)">复制</el-button>
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" prop="createTime" label="创建时间" align="center" />
<el-table-column label="操作" align="center" fixed="right">
<template slot-scope="scope">
<el-button size="small" type="text" @click="toShowDetail(scope.row)">查看详情</el-button>
<el-button size="small" type="text" @click="toPreview(scope.row)">预览</el-button>
<el-button size="small" type="text" @click="toEditArticle(scope.row)">修改</el-button>
<el-button size="small" type="text" @click="deleteArticle(scope.row.id)">删除</el-button>
</template>
</el-table-column>
</el-table>
<!--分页组件-->
<pagination />
</div>
</template>
<script>
import crudArticle from '@/api/platform/article'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import pagination from '@crud/Pagination'
export default {
name: 'Article'
name: 'Article',
components: { rrOperation, pagination },
// 数据字典
dicts: ['material_type'],
cruds() {
return CRUD({ title: '文章', url: 'api/article', crudMethod: { ...crudArticle }, optShow: { reset: true }})
},
mixins: [presenter(), header(), crud()],
data() {
return {
permission: {
add: ['admin', 'article:add'],
edit: ['admin', 'article:edit'],
del: ['admin', 'article:del']
},
modules:[
{ label: '景区', value: '景区' },
{ label: '新闻', value: '新闻' },
{ label: '活动', value: '活动' },
{ label: '其他', value: '其他' }
],
labels:[
{ label: '图片', value: '图片' },
{ label: '视频', value: '视频' },
{ label: '音频', value: '音频' },
{ label: '文件', value: '文件' }
]
}
},
created() {
this.crud.data = [{ id: 1, title: '景区', articletype: '图文', top: 1, moduleName: '工作台', labelName: '使用教程', createTime: '2020-01-01' },
{ id: 2, title: '景区', articletype: '图文', top: 0, moduleName: '工作台', labelName: '使用教程', createTime: '2020-01-01' },
]
this.crud.resetDataStatus()
},
methods: {
// 复制链接
copyLink(row){
if(row.id == null||row.id == ''){ this.$message.warning('链接为空');return;}
var aux = document.createElement("input");
aux.setAttribute("value", `${process.env.VUE_APP_BASE_PATH}/#article/content?id=${row.id}`);
document.body.appendChild(aux);
aux.select();
document.execCommand("copy");
document.body.removeChild(aux);
this.$message.success('复制成功');
aux.remove();
},
// 文章详情
toShowDetail(row) {
this.$router.push({ path: '/platform/article/detail' , query: { id:row.id, moduleName: row.moduleName, labelName: row.labelName } });
},
// 预览
toPreview(row) {
window.open(`${process.env.VUE_APP_BASE_PATH}/#article/content?id=${row.id}`);
},
// 添加文章
toAddArticle() {
this.$router.push({ path: '/platform/article/add' });
},
// 添加文章
toEditArticle(row) {
this.$router.push({ path: '/platform/article/edit', query: { id:row.id, moduleName: row.moduleName, labelName: row.labelName } });
},
// 文章删除
deleteArticle(id) {
this.$confirm('确定要删除该文章吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
})
.then(async() => {
try {
// state.tableData.loading = true;
// let res = await artApi.deleteArticle(id);
// if(res?.success){
// await getTableData();
this.$message.success('文章删除成功！');
// } else ElMessage.error('文章删除失败！');
} catch(e) {
this.$message.error('处理失败！');
} finally {
// state.tableData.loading = false;
}
})
}
}
}
</script>

33
src/views/platform/material/index.vue
View File

@ -32,22 +32,25 @@
</el-col>
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
<el-form-item label="素材类型" prop="type">
<el-select v-model="form.type" placeholder="请选择素材类型" clearable>
<el-select @change="handleRemove" v-model="form.type" placeholder="请选择素材类型" clearable>
<el-option v-for="item in dict.material_type" :key="item.id" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
<el-form-item label="素材资源" prop="files">
<el-upload ref="uploadRef" action="#" list-type="picture-card" :class="{ disabled: uploadDisabled }"
:limit="1" :file-list="form.files" :on-change="handleChange" :auto-upload="false">
<el-upload ref="uploadRef" action="#" list-type="picture-card" :class="{ disabled: uploadDisabled }" :disabled="!form.type"
:limit="1" :file-list="form.files" :on-change="handleChange" :auto-upload="false" :accept="form.type === '轮播图'?'image/*':'viedo/*'">
<div style="display: flex;flex-direction: column;align-items: center;justify-content: center;margin-top: -20px;">
<i class="el-icon-plus" style="font-size: 30px;" />
<span style="margin: 5px 0 -20px;line-height: 20px">上传</span>
</div>
<template #file="{ file }">
<div>
<img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
<img v-if="form.type === '轮播图'" class="el-upload-list__item-thumbnail" :src="file.url" alt="">
<video preload="meta" v-else class="el-upload-list__item-thumbnail" :src="file.url">
您的浏览器不支持视频预览。
</video>
<span class="el-upload-list__item-actions">
<span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
<i class="el-icon-zoom-in" />
@ -60,7 +63,13 @@
</template>
</el-upload>
<el-dialog append-to-body :visible.sync="dialogVisible" top="20vh">
<div><img :src="dialogImageUrl" style="width: 100%" alt="Preview Image"></div>
<div>
<img v-if="form.type === '轮播图'" :src="dialogImageUrl" style="width: 100%" alt="Preview Image">
<video controls v-else src="el-upload-list__item-thumbnail" style="width: 100%"
:src="dialogImageUrl" preload="meta">
您的浏览器不支持视频预览。
</video>
</div>
</el-dialog>
</el-form-item>
</el-col>
@ -174,7 +183,13 @@ export default {
},
// 触发图片上传
handleChange(file, uploadFiles) {
if (file.raw.type === 'image/png' || file.raw.type === 'image/jpeg' || file.raw.type === 'image/jpg' || file.raw.type === 'image/gif') {
if(!this.form.type) {
this.$message.warning('请选择文章类型！');
return;
}
const isTypeImage = this.form.type === '轮播图';
const fileType = file.raw.type;
if ((isTypeImage&&fileType.includes('image'))||(!isTypeImage)&&fileType.includes('video')) {
this.loading = true
this.form.files = uploadFiles
this.uploadDisabled = true
@ -184,7 +199,7 @@ export default {
// let res = await photoApi.uploadFile(formdata);
// if(res?.success){
// this.form.url = res.data.path;
this.$message.success('图片上传成功！')
this.$message.success(`${isTypeImage?'图片':'视频'}上传成功！`)
this.loading = false
console.log(this.form)
// }else{
@ -192,10 +207,10 @@ export default {
// }
} catch (error) {
this.loading = false
this.$message.error('图片上传失败！')
this.$message.error(`${isTypeImage?'图片':'视频'}上传失败！`)
}
} else {
this.$confirm('图片的格式不正确，请重新选择！', '提示', {
this.$confirm(`${isTypeImage?'图片':'视频'}的格式不正确，请重新选择！`, '提示', {
confirmButtonText: '确定',
type: 'warning'
})