上传组件优化

src/components/Upload/myUpload.vue

@@ -48,8 +48,13 @@
       </div>
       <template #tip v-if="!props.isDisableUpload && isShowTips">
         <div class="el-upload__tip">
-          <span>支持{{ acceptType.replace(",", "/") }}；</span> <span v-if="isLimitSize">文件大小不能超过{{
-            props.maxFileSize }}M</span>
+          <span>支持{{ acceptType.replace(",", "/") }}；</span>
+          <span v-if="isLimitSize">
+            文件大小不能超过{{ props.maxFileSize }}M;
+          </span>
+          <span v-if="isCheckMM">
+            尺寸：{{ props.widthLimit }}*{{ props.heightLimit }}px
+          </span>
         </div>
       </template>
     </el-upload>
@@ -68,27 +73,29 @@ import type { UploadProps, UploadUserFile } from 'element-plus'
 const emits = defineEmits(["fileSuccess", "fileRemove"]);
 interface Props {
   acceptType?: string; // 上传文件类型
-  acceptTypeDesc?: string; // 描述 - 上传文件类型
   isMultiple?: boolean; //   是否可批量上传
   isCheckName?: boolean; //   是否检查文件名
   limitNum?: number; // 允许上传文件的最大数量
   isDisableUpload?: boolean; // 是否禁用上传
   maxFileSize?: number; // 文件大小
+  widthLimit?: number; // 图片宽度
+  heightLimit?: number; // 图片高度
   isLimitSize?: boolean;//是否限制大小
   isShowTips?: boolean;
   action?: string;
   formType?: string;//上传的文件字段名称
   fileList?: any; // 回显的文件
   isDownLoad?: boolean; // 是否可以下载
+  isCheckMM?: boolean; // 是否检查图片尺寸
   listType?: string;//文件上传样式类型
 }
 // 接收父组件传递过来的参数
 const props = withDefaults(defineProps<Props>(), {
   acceptType: ".jpeg,.png",
-  acceptTypeDesc: ".png/.jpeg",
   formType: "photo",
   isMultiple: false,
   isCheckName: false,
+  isCheckMM: false,
   limitNum: 10,
   isDisableUpload: false,
   maxFileSize: 0.5,
@@ -96,15 +103,14 @@ const props = withDefaults(defineProps<Props>(), {
   isLimitSize: true,
   action: "/qiniu/upload/image",
   fileList: [],
+  widthLimit: 690,
+  heightLimit: 280,
   isDownLoad: false,
   listType: 'picture-card'
 });
 let waitFileList = ref<any[]>([]);
 
 waitFileList.value = props.fileList;
-// waitFileList.value?.forEach((item: any) => {
-//   item.name = item.original;
-// });
 const dialogImageUrl = ref('')
 const dialogVisible = ref(false)
 const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
@@ -119,16 +125,15 @@ watch(
   () => {
     console.log("props.fileList====>", props.fileList);
     waitFileList.value = props.fileList;
-    // waitFileList.value?.forEach((item: any) => {
-    //   item.name = item.original;
-    // });
   }
 );
 
 // 文件变化Handle 这里监听上传文件的变化是一个一个接收到变化的，所以文件也是一个一个上传到服务器上面的
 const handleChange = async (file: any, fileList: any[]) => {
-  console.log(fileList, 'fileListfileList');
-  console.log(file, 'filefilefile', /^[0-9_][0-9_]*$/.test(file.name));
+  if (props.isCheckMM) {
+    const test = await limitFileWH(file)
+    if (!test) return
+  }
   if (!/^[0-9]+_/.test(file.name) && props.isCheckName) {
     ElMessage.error(`文件上传格式错误`);
     return false
@@ -139,13 +144,13 @@ const handleChange = async (file: any, fileList: any[]) => {
   let acceptTypeList = list.map((its: string) => {
     return getType(its)
   })
+  console.log(list, acceptTypeList, rawFile.type, 'acceptTypeListacceptTypeList');
   // 如果要检索的字符串值没有出现，则该方法返回 -1
   const ars = acceptTypeList.filter((q: string) => {
     return rawFile.type.indexOf(q) > -1
   })
   // 用于校验是否符合上传条件
-  const type = props.acceptTypeDesc.replace("/", ", ");
-  console.log(props.acceptTypeDesc, 66666666, props.acceptType, '55555555555', type);
+  const type = props.acceptType
   if (ars.length < 1) {
     ElMessage.error(`仅支持格式为${type}的图片`);
     return false;
@@ -156,75 +161,115 @@ const handleChange = async (file: any, fileList: any[]) => {
       return item.uid != rawFile.uid;
     });
     return false;
-  } else {
-    let formData = new FormData();
-    formData.append(props.formType, rawFile);
-    const loadingInstance = ElLoading.service({
-      text: "正在上传",
-      background: "rgba(0,0,0,.2)",
-    });
-    // 上传到服务器上面
-    const requestURL: string = props.action;
-    http.post(requestURL, formData)
-      .then(async (res: any) => {
-        if (res.code == 10000) {
-          loadingInstance.close();
-          waitFileList.value.push({ uid: file.uid, url: res.data })
-          emits("fileSuccess", res.data);
-        } else {
-          loadingInstance.close();
-          ElMessage.warning(`文件上传失败`);
-        }
-      })
-      .catch(() => {
-        loadingInstance.close();
-        // ElMessage.warning(`文件上传失败`);
-      });
   }
+  // else {
+  //   let formData = new FormData();
+  //   formData.append(props.formType, rawFile);
+  //   const loadingInstance = ElLoading.service({
+  //     text: "正在上传",
+  //     background: "rgba(0,0,0,.2)",
+  //   });
+  //   // 上传到服务器上面
+  //   const requestURL: string = props.action;
+  //   http.post(requestURL, formData)
+  //     .then(async (res: any) => {
+  //       if (res.code == 10000) {
+  //         loadingInstance.close();
+  //         waitFileList.value.push({ uid: file.uid, url: res.data })
+  //         emits("fileSuccess", res.data);
+  //       } else {
+  //         loadingInstance.close();
+  //         ElMessage.warning(`文件上传失败`);
+  //       }
+  //     })
+  //     .catch(() => {
+  //       loadingInstance.close();
+  //       // ElMessage.warning(`文件上传失败`);
+  //     });
+  // }
   return true;
 };
+//限制图片尺寸
+const limitFileWH = (file) => {
+  const isSize = new Promise(function (resolve, reject) {
+    const reader = new FileReader();
+    reader.onload = (event) => {
+      const image = new Image();
+      image.onload = () => {
+        const { width, height, size } = image;
+        if (width !== props.widthLimit || height !== props.heightLimit) {
+          reject(image);
+        } else {
+          resolve(image);
+        }
+      };
+
+      image.onerror = (error) => {
+        reject(`图片加载错误：${error}`);
+      };
+      image.src = event.target.result;
+    };
+
+    reader.onerror = (error) => {
+      reject(`文件读取错误：${error}`);
+    };
+
+    reader.readAsDataURL(file.raw);
+  }).then((e) => {
+    return true;
+  }, (e) => {
+    console.log(props.widthLimit);
+    ElMessage.error({
+      message: '上传文件的图片大小不合符标准,宽需要为' + props.widthLimit + 'px，高需要为' + props.heightLimit + 'px。当前上传图片的宽高分别为：' + e.width + 'px和' +
+        e.height + 'px',
+    })
+    return false;
+  });
+  return isSize
+}
+
 
 // 校验上传文件格式
 const getType = (acceptType: string) => {
   let val = "";
   switch (acceptType) {
-    case "xls":
+    case ".xls":
       val = "excel";
       break;
-    case "doc":
+    case ".doc":
       val = "word";
       break;
-    case "pdf":
+    case ".pdf":
       val = "pdf";
       break;
-    case "zip":
+    case ".zip":
       val = "zip";
       break;
-    case "xlsx":
+    case ".xlsx":
       val = "sheet";
       break;
-    case "pptx":
+    case ".pptx":
       val = "presentation";
       break;
-    case "docx":
+    case ".docx":
       val = "document";
       break;
-    case "text":
+    case ".text":
       val = "text";
       break;
-    case "jpeg":
+    case ".jpeg":
       val = "jpeg";
       break;
-    case "png":
+    case ".png":
       val = "png";
       break;
-    case "gif":
+    case ".gif":
       val = "gif";
       break;
-    case "mp4":
+    case ".mp4":
       val = "mp4";
       break;
-    case "mp3":
+    case ".mp3":
       val = "mp3";
       break;
   }

src/views/pageLayout/viewpagerPageManage/form/create.vue

@@ -1,17 +1,20 @@
 <template>
   <el-form :model="formCallback" label-width="120px" ref="form" v-loading="loading" class="pr-4">
-    <el-form-item label="列表名称" prop="ids" :rules="[{ required: false, message: '巨量账户ID必须填写' }]" label-width="120px">
+    <el-form-item label="轮播图名称" prop="ids" :rules="[{ required: false, message: '巨量账户ID必须填写' }]" label-width="120px">
       <el-input v-model="formCallback.type_str" disabled size="default" clearable></el-input>
     </el-form-item>
+    <el-form-item label="轮播图名称" prop="ids" :rules="[{ required: false, message: '巨量账户ID必须填写' }]" label-width="120px">
+      <el-input v-model="formCallback.type_str" disabled size="default" clearable></el-input>
+    </el-form-item>
+    <el-form-item label="封面" prop="cover_image">
+      <my-upload acceptType=".png" :isCheckMM="false" :isMultiple="true" @fileRemove="fileRemove"
+        @fileSuccess="fileSuccess" :fileList="formCallback.fileList" action="/qiniu/upload/image"></my-upload>
+    </el-form-item>
     <el-form-item label="短剧" prop="duanjus" :rules="[{ required: true, message: '选择短剧' }]">
       <div>
         <div class="flex flex-wrap mb-5" v-if="formCallback.duanjus.length > 0">
           <div v-for="item in formCallback.duanjus" :key="item.id" class="mt-3 mr-3">
-            <el-input v-model="item.name" disabled placeholder="短剧名称" style="width:300px;" class="input-with-select">
-              <template #prepend>
-                <el-input type="number" min="1" disabled v-model.number="item.sort" placeholder="排序" size="default"
-                  clearable style="width: 115px"></el-input>
-              </template>
+            <el-input v-model="item.name" disabled placeholder="短剧名称" style="width:200px;" class="input-with-select">
             </el-input>
           </div>
         </div>
@@ -51,7 +54,14 @@ const formCallback = ref({
   duanjus: []
 })
 
-
+const fileSuccess = (e) => {
+  console.log(e);
+  formCallback.value.cover_image = e;
+}
+const fileRemove = (e) => {
+  console.log(e);
+  formCallback.value.cover_image = '';
+}
 const chooseShort = () => {
   videoVisible.value = true
 }

src/views/pageLayout/viewpagerPageManage/index.vue

@@ -51,7 +51,7 @@ import config from './form/config.vue';
 import { useGetList } from '@/hook/curd/useGetList';
 import { operationManageFirstPageEnableStatus } from '@/api/pageLayout/homePage/index'
 
-const api = 'operationManage/firstPage/list';
+const api = 'cpManage/cp/manage/cp_list';
 
 const { data, query, search, reset, loading } = useGetList(api, true);
 const tableData = computed(() => data.value?.data);