RING:素材库上传素材校验

src/views/material/component/search.vue

@@ -54,9 +54,11 @@
         <a-select-option value="beijing">Zone two</a-select-option>
       </a-select>
     </div>
-    <span class="flag" @click="openFlag = openFlag ? false : true">{{
-      openFlag ? "收起" : "展开"
-    }}</span>
+    <span class="flag" @click="openFlag = openFlag ? false : true"
+      >{{ openFlag ? "收起" : "展开" }}
+      <i v-if="openFlag" class="iconfont icon-shouqi"></i>
+      <i v-else class="iconfont icon-zhankai"></i
+    ></span>
     <div class="search-item" v-show="openFlag">
       <span class="label">需求方：</span>
       <a-input

src/views/material/component/upload-image.vue

@@ -7,13 +7,17 @@
         type="file"
         @change="addFile"
         multiple
-        accept=".jpg,.png,.jpeg,"
+        accept=".jpg,.png"
       />
       <i class="iconfont icon-empty"></i>
       <p>点击或将文件拖拽到这里上传</p>
-      <p class="gray-font">建议最佳：宽高比16:9，1280*720≤尺寸≤2560*1440，</p>
       <p class="gray-font">
-        支持JPG，PNG等图片格式。命名格式：推广书记名称-需求方-文案
+        建议最佳：横版大图：宽高比16:9，1280*720≤尺寸≤2560*1440，
+      </p>
+      <p class="gray-font">竖版大图：宽高比9:16，720*1280≤尺寸≤1440*2560，</p>
+      <p class="gray-font">小图：宽高比1.52，456*300≤尺寸≤1368*900，</p>
+      <p class="gray-font">
+        支持JPG，PNG等图片格式。命名格式：推广书籍名称-需求方-文案
       </p>
     </div>
     <div class="upload-list">
@@ -53,20 +57,74 @@ const UploadVideo = defineComponent({
     addFile(event: any) {
       console.log(event.target.files);
       event.target.files.forEach((item: any) => {
+        this.getImgInfo(item).then((imgInfo: any) => {
+          let { width, height } = imgInfo;
+          item.width = width;
+          item.height = height;
+        });
+        // 校验文件尺寸大小比例
+        if (
+          item.height / item.width !== 16 / 9 &&
+          item.height / item.width !== 9 / 16 &&
+          item.height / item.width !== 1.52 &&
+          item.width / item.height !== 1.52
+        )
+          return message.warning(
+            `图片：${item.name} 宽高比例不符合要求比例，请修改后重新上传`
+          );
+        if (item.height > 1368 || item.width > 1368)
+          return message.warning(
+            `图片：${item.name} 尺寸不符合要求尺寸，请修改后重新上传`
+          );
+        // 正则 /^[\u4E00-\u9FA5A-Za-z0-9]+(-|\/)[\u4E00-\u9FA5A-Za-z0-9]+(-|\/)[\u4E00-\u9FA5A-Za-z0-9]+$/  XX-XX-XX
+        if (this.checkNumber(item.name) !== 2)
+          return message.warning(
+            `图片：${item.name} 不符合命名要求，请修改后重新上传`
+          );
         this.fileList.push({
           file: item,
           name: item.name,
           percent: 0,
           materialSize: (item.size / 1024 / 1024).toFixed(2) + "MB",
           type: item.type.split("/")[0],
+          width: item.width,
+          height: item.height,
         });
       });
       console.log("新增文件列表", this.fileList);
     },
+    // 获取图片宽高信息
+    getImgInfo(file: any) {
+      return new Promise((resolve, reject) => {
+        let reader = new FileReader();
+        reader.readAsDataURL(file); // 必须用file.raw
+        reader.onload = () => {
+          // 让页面中的img标签的src指向读取的路径
+          let img: any = new Image();
+          img.src = reader.result;
+          img.onload = () => {
+            resolve({
+              width: img.width,
+              height: img.height,
+            });
+          };
+        };
+      });
+    },
     // 删除item
     deleteItem(index: number) {
       this.fileList.splice(index, 1);
     },
+    // 工具函数 返回-出现在字符串中的次数
+    checkNumber(str: string) {
+      let num = 0;
+      str.split("").forEach((item: any) => {
+        if (item === "-") {
+          num++;
+        }
+      });
+      return num;
+    },
   },
 });
 

src/views/material/component/upload-video.vue

@@ -53,20 +53,71 @@ const UploadVideo = defineComponent({
     addFile(event: any) {
       console.log(event.target.files);
       event.target.files.forEach((item: any) => {
+        console.log("item", item, this.checkNumber(item.name));
+        this.getVideoMsg(item).then((videoinfo: any) => {
+          const { duration, height, width } = videoinfo;
+          //获取到视频的时长,高度,宽度
+          console.log(duration, height, width);
+          item.duration = duration;
+          item.height = height;
+          item.width = width;
+        });
+        // 校验文件尺寸比例大小
+        if (Number((item.size / 1024 / 1024).toFixed(2)) > 500)
+          return message.warning(`视频：${item.name}大小超过了500M`);
+        if (
+          item.height / item.width !== 16 / 9 &&
+          item.height / item.width !== 9 / 16
+        )
+          return message.warning(
+            `视频：${item.name}宽高比例不符合要求比例，请修改后重新上传`
+          );
+        // 正则 /^[\u4E00-\u9FA5A-Za-z0-9]+(-|\/)[\u4E00-\u9FA5A-Za-z0-9]+(-|\/)[\u4E00-\u9FA5A-Za-z0-9]+$/  XX-XX-XX
+        if (this.checkNumber(item.name) !== 2)
+          return message.warning(
+            `视频：${item.name}不符合命名要求，请修改后重新上传`
+          );
         this.fileList.push({
           file: item,
           name: item.name,
           percent: 0,
           materialSize: (item.size / 1024 / 1024).toFixed(2) + "MB",
           type: item.type.split("/")[0],
+          duration: item.duration,
+          height: item.height,
+          width: item.width,
         });
       });
       console.log("新增文件列表", this.fileList);
     },
+    // 获取视频宽高时长
+    getVideoMsg(file: any) {
+      return new Promise((resolve) => {
+        let videoElement = document.createElement("video");
+        videoElement.src = URL.createObjectURL(file);
+        videoElement.addEventListener("loadedmetadata", function () {
+          resolve({
+            duration: videoElement.duration,
+            height: videoElement.videoHeight,
+            width: videoElement.videoWidth,
+          });
+        });
+      });
+    },
     // 删除item
     deleteItem(index: number) {
       this.fileList.splice(index, 1);
     },
+    // 工具函数 返回-出现在字符串中的次数
+    checkNumber(str: string) {
+      let num = 0;
+      str.split("").forEach((item: any) => {
+        if (item === "-") {
+          num++;
+        }
+      });
+      return num;
+    },
   },
 });