上传图片限制大小等

src/views/ad/index.vue

@@ -32,7 +32,7 @@
 							</el-form>
 							<el-button type="primary" class="export" @click="handleAD">添加广告</el-button>
 						</div>
-						<el-table ref="multipleTable" :data="tableData" height="558" style="width: 100%" :cell-style="cell_style" v-loading="loading"
+						<el-table ref="multipleTable" :data="tableData" height="528" style="width: 100%" :cell-style="cell_style" v-loading="loading"
 							:header-cell-style="header_cell_style">
 							<el-table-column fixed="left" label="排序" align="center" width="80">
 								<template slot-scope="scope">
@@ -47,7 +47,7 @@
 							<el-table-column label="图片" align="center">
 								<template slot-scope="scope">
 									<viewer>
-										<img style="height: 130px; cursor: pointer;" :src="scope.row.imageUrl" fit="contain" />
+										<img style="height: 128px; cursor: pointer;" :src="scope.row.imageUrl" fit="contain" />
 									</viewer>
 								</template>
 							</el-table-column>
@@ -108,6 +108,21 @@
 						</div>
 						<input type="file" ref="modifyImageUploadInput" style="display:none" accept=".jpg,.png" @change="uploadImage($event, 'modifyImg')" />
 					</el-form-item>
+					<el-form-item id="uploadImg" label="">
+						<div style="color: #f00; line-height: 20px;">
+							系统仅支持上传 1 张图片，图片不超过 5M，比例为 3 : 2，为了不遮挡文字不得有白边，上传请按照以下标准：
+						</div>
+					</el-form-item>
+					<el-form-item id="uploadImg" label="">
+						<div style="display: flex; justify-content: space-around; margin: -20px 10px 0 0;">
+							<div style="display: flex; justify-content: center; align-items: center; width: 150px; height: 75px; border: 1px solid #999;">
+								<div style="display: flex; justify-content: center; align-items: center; border: 1px dashed #ccc; width: 125px; height: 50px;">
+									文字区域</div>
+							</div>
+							<img :src="imgs.img1" style="width: 150px; height: 75px;" alt="图片示例" />
+							<img :src="imgs.img3" style="width: 150px; height: 75px;" alt="图片示例" />
+						</div>
+					</el-form-item>
 					<el-form-item id="logoStyle" label="LOGO样式" prop="logoStyle" :required="true">
 						<div style="display: flex; align-items: center;">
 							<el-image style="width: 100px; height: 40px; margin-right: 30px;"
@@ -131,7 +146,7 @@
 						<el-tooltip effect="light" content="如需配置链接，请联系创海配置域名。">
 							<el-input placeholder="请输入链接" v-model="formModifyAD.adLink" style="width: 90%;" clearable></el-input>
 						</el-tooltip>
-						<div v-if="formModifyAD.checkedTypes == 1" style="color: #f00;">如需配置链接，请联系创海配置域名。</div>
+						<div v-if="formModifyAD.checkedTypes == 1" style="color: #f00; line-height: 22px;">如需配置链接，请联系创海配置域名。</div>
 					</el-form-item>
 					<el-form-item :label="formModifyAD.adSelectClass" prop="adPage" v-if="formModifyAD.checkedTypes == 2"
 						:required="formModifyAD.checkedTypes == 2">
@@ -178,6 +193,21 @@
 						</div>
 						<input type="file" ref="addImageUploadInput" style="display:none" accept=".jpg,.png" @change="uploadImage($event, 'addImg')" />
 					</el-form-item>
+					<el-form-item id="uploadImg" label="">
+						<div style="color: #f00; line-height: 20px;">
+							系统仅支持上传 1 张图片，图片不超过 5M，比例为 3 : 2，为了不遮挡文字不得有白边，上传请按照以下标准：
+						</div>
+					</el-form-item>
+					<el-form-item id="uploadImg" label="">
+						<div style="display: flex; justify-content: space-around; margin: -20px 10px 0 0;">
+							<div style="display: flex; justify-content: center; align-items: center; width: 150px; height: 75px; border: 1px solid #999;">
+								<div style="display: flex; justify-content: center; align-items: center; border: 1px dashed #ccc; width: 125px; height: 50px;">
+									文字区域</div>
+							</div>
+							<img :src="imgs.img1" style="width: 150px; height: 75px;" alt="图片示例" />
+							<img :src="imgs.img3" style="width: 150px; height: 75px;" alt="图片示例" />
+						</div>
+					</el-form-item>
 					<el-form-item id="logoStyle" label="LOGO样式" prop="logoStyle" :required="true">
 						<div style="display: flex; align-items: center;">
 							<el-image style="width: 100px; height: 40px; margin-right: 30px;" :class="{ 'selected': selected_1, 'unselected': !selected_1 }"
@@ -200,7 +230,7 @@
 						<el-tooltip effect="light" content="如需配置链接，请联系创海配置域名。">
 							<el-input placeholder="请输入链接" v-model="formAD.adLink" style="width: 90%;" clearable></el-input>
 						</el-tooltip>
-						<div v-if="formAD.checkedTypes == 1" style="color: #f00;">如需配置链接，请联系创海配置域名。</div>
+						<div v-if="formAD.checkedTypes == 1" style="color: #f00; line-height: 22px;">如需配置链接，请联系创海配置域名。</div>
 					</el-form-item>
 					<el-form-item :label="formAD.adSelectClass" prop="adPage" v-if="formAD.checkedTypes == 2" :required="formAD.checkedTypes == 2">
 						<div id="panel" style="width: 100%;">
@@ -306,10 +336,6 @@
 						<el-input v-model="youhuiquanFormInline.title" style="width: 200px;" prefix-icon="el-icon-search" clearable
 							placeholder="请输入优惠券名称"></el-input>
 					</el-form-item>
-					<!-- <el-form-item label="发放时间">
-						<el-date-picker v-model="youhuiquanFormInline.search_datatime" type="daterange" align="right" start-placeholder="开始日期"
-							end-placeholder="结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd">
-						</el-date-picker> -->
 					</el-form-item>
 					<el-form-item>
 						<el-button type="primary" class="btn-search" @click="youhuiquan_btn_search">查询</el-button>
@@ -707,6 +733,11 @@
 				gonglueVisible: false, // 选择攻略（推文）页面，内层窗口
 				minsuVisible: false, // 民宿
 				shangpinVisible: false, // 商品
+				imgs: {
+					img1: require('../../icons/images/ad/1.png'),
+					img2: require('../../icons/images/ad/2.png'),
+					img3: require('../../icons/images/ad/3.jpg'),
+				},
 				formAD: {
 					id: '', // id
 					adTitle: '', // 广告标题
@@ -1505,6 +1536,20 @@
 			uploadImage(event, imgOrVideo) {
 				const file = event.target.files[0];
 
+				if (file) {
+					// 检查文件大小
+					if (file.size > 5 * 1024 * 1024) {
+						this.$message.warning('图片大小不能超过 5M');
+						return;
+					}
+
+					// 其他上传逻辑
+					this.uploadImageAction(file, imgOrVideo);
+				}
+				
+			},
+			// 实现上传
+			uploadImageAction(file, imgOrVideo) {
 				const key = `/uploads/ad/${new Date().getTime()}`; // 设置上传到 COS 后的文件名
 				var that = this
 				const cos = new COS(this.cosVal);