文件上传大小提示

src/components/cus/cus-form-link/upload.vue

@@ -27,9 +27,12 @@
         </template>
         <template v-else>
           <div class="upload-layout-list_button" :class="{'limit-disabled': isLimitCpt}">
-<!--            <SvgIcon name="add" color="#ffffff" size="14"/>-->
-            选择{{acceptTypeFormatCpt}}
-            <template v-if="limit > 0">(最多{{ limit }}个)</template>
+            <div class="upload-layout-list_button-main">
+              <!--            <SvgIcon name="add" color="#ffffff" size="14"/>-->
+              选择{{acceptTypeFormatCpt}}
+              <template v-if="limit > 0">(最多{{ limit }}个)</template>
+            </div>
+            <div class="upload-layout-list_button-tips">单个文件不能超过{{maxSize}}M</div>
           </div>
         </template>
       </el-tooltip>
@@ -138,6 +141,7 @@ export default defineComponent({
         url: ''
       },
       formView: inject('form-view', false),
+      maxSize: 20
     })
     watch(() => state.paramVal, (n) => {
       emit('emitParam', n)
@@ -203,6 +207,7 @@ export default defineComponent({
       if (that.$util.isValue(props.acceptType)) {
         str += `只支持大小在0~${props.acceptMax}M内，格式为${props.acceptType}的自定义文件`
       } else {
+        str += `只支持大小在0~${state.maxSize}M内的文件`
         // if (props.type === 'all') {
         //   str += `只支持大小在0~${store.state.app.uploadConfig.imgMax}M内，格式为${store.state.app.uploadConfig.imgType}的图片，`
         //   str += `或大小在0~${store.state.app.uploadConfig.fileMax}M内，格式为${store.state.app.uploadConfig.fileType}的文件`
@@ -230,6 +235,10 @@ export default defineComponent({
           return false
         }
       } else {
+        if (file.size / (1024 * 1024) > state.maxSize) {
+          ElMessage.warning(`文件大小不可超过${state.maxSize}M`)
+          return false
+        }
         // if (props.type === 'img') {
         //   if (file.size / (1024 * 1024) > store.state.app.uploadConfig.imgMax) {
         //     ElMessage.warning(`图片大小不可超过${store.state.app.uploadConfig.imgMax}M`)
@@ -418,27 +427,40 @@ export default defineComponent({
   .el-upload-com {
     :deep(.el-upload) {
       .upload-layout-list_button {
-        height: 24px;
+        height: 32px;
         display: flex;
         align-items: center;
-        justify-content: center;
-        padding: 0 6px;
-        background-color: rgba(0, 133, 247, 0.2);
-        border-radius: 4px;
-        border: 1px solid rgba(0, 133, 247, 0.5);
-        font-size: 14px;
-        font-family: Microsoft YaHei;
-        font-weight: 400;
-        color: #FFFFFF;
-        .svg-icon {
-          margin-right: 7px;
+        .upload-layout-list_button-main {
+          height: 24px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          padding: 0 6px;
+          background-color: rgba(0, 133, 247, 0.2);
+          border-radius: 4px;
+          border: 1px solid rgba(0, 133, 247, 0.5);
+          font-size: 14px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #FFFFFF;
+          .svg-icon {
+            margin-right: 7px;
+          }
         }
         &.limit-disabled {
-          cursor: no-drop;
-          opacity: 0.5;
+          .upload-layout-list_button-main {
+            cursor: no-drop;
+            opacity: 0.5;
+          }
+        }
+        .upload-layout-list_button-tips {
+          margin-left: 8px;
+          font-size: 12px;
+          font-family: PingFang SC, PingFang SC;
+          font-weight: 400;
+          color: rgba(255,255,255,0.5);
         }
       }
-
       .upload-layout-card {
         width: 100%;
         height: 100%;