diff --git a/src/upload/src/Upload.tsx b/src/upload/src/Upload.tsx
index ee327d3bbba..54dfb092a47 100644
--- a/src/upload/src/Upload.tsx
+++ b/src/upload/src/Upload.tsx
@@ -258,10 +258,7 @@ const uploadProps = {
   },
   onPreview: Function as PropType<OnPreview>,
   createThumbnailUrl: Function as PropType<CreateThumbnailUrl>,
-  abstract: {
-    type: Boolean,
-    default: false
-  }
+  abstract: Boolean
 } as const
 
 export type UploadProps = ExtractPublicPropTypes<typeof uploadProps>
@@ -551,12 +548,10 @@ export default defineComponent({
           multiple={this.multiple}
           onChange={this.handleFileInputChange}
         />
-        {this.listType !== 'image-card' ? (
+        {this.listType !== 'image-card' && (
           <NUploadTrigger>{this.$slots}</NUploadTrigger>
-        ) : null}
-        {this.showFileList ? (
-          <NUploadFileList>{this.$slots}</NUploadFileList>
-        ) : null}
+        )}
+        {this.showFileList && <NUploadFileList>{this.$slots}</NUploadFileList>}
       </div>
     )
   }
diff --git a/src/upload/src/UploadFileList.tsx b/src/upload/src/UploadFileList.tsx
index ef4370fda04..0c8ec5590ea 100644
--- a/src/upload/src/UploadFileList.tsx
+++ b/src/upload/src/UploadFileList.tsx
@@ -1,10 +1,19 @@
-import { h, defineComponent, inject, VNode, CSSProperties } from 'vue'
+import {
+  h,
+  defineComponent,
+  inject,
+  VNode,
+  CSSProperties,
+  computed,
+  ComputedRef
+} from 'vue'
 import { throwError } from '../../_utils'
 import { uploadInjectionKey } from './interface'
 import NUploadFile from './UploadFile'
 import { NImageGroup } from '../../image'
 import { NFadeInExpandTransition } from '../../_internal'
 import NUploadTrigger from './UploadTrigger'
+
 export default defineComponent({
   name: 'UploadFileList',
   setup (_, { slots }) {
@@ -23,7 +32,9 @@ export default defineComponent({
       fileListStyle,
       cssVarsRef
     } = NUpload
-    const isImageCardType = listTypeRef.value === 'image-card'
+    const isImageCardTypeRef = computed(
+      () => listTypeRef.value === 'image-card'
+    )
 
     const createFileList = (): VNode[] =>
       mergedFileListRef.value.map((file) => (
@@ -35,27 +46,30 @@ export default defineComponent({
         />
       ))
 
-    const uploadFileList = isImageCardType ? (
-      <NImageGroup>{{ default: createFileList }}</NImageGroup>
-    ) : (
-      <NFadeInExpandTransition group>
-        {{
-          default: createFileList
-        }}
-      </NFadeInExpandTransition>
-    )
+    const createUploadFileList = (
+      isImageCardTypeRef: ComputedRef<boolean>
+    ): VNode =>
+      isImageCardTypeRef.value ? (
+        <NImageGroup>{{ default: createFileList }}</NImageGroup>
+      ) : (
+        <NFadeInExpandTransition group>
+          {{
+            default: createFileList
+          }}
+        </NFadeInExpandTransition>
+      )
 
     return () => (
       <div
         class={[
           `${mergedClsPrefixRef.value}-upload-file-list`,
-          isImageCardType &&
+          isImageCardTypeRef.value &&
             `${mergedClsPrefixRef.value}-upload-file-list--grid`
         ]}
         style={[cssVarsRef.value, fileListStyle as CSSProperties]}
       >
-        {uploadFileList}
-        {isImageCardType && <NUploadTrigger>{slots}</NUploadTrigger>}
+        {createUploadFileList(isImageCardTypeRef)}
+        {isImageCardTypeRef.value && <NUploadTrigger>{slots}</NUploadTrigger>}
       </div>
     )
   }
diff --git a/src/upload/src/UploadTrigger.tsx b/src/upload/src/UploadTrigger.tsx
index 6806fa15d67..164398c52b8 100644
--- a/src/upload/src/UploadTrigger.tsx
+++ b/src/upload/src/UploadTrigger.tsx
@@ -1,22 +1,11 @@
-import { h, defineComponent, inject, computed, renderSlot } from 'vue'
-import { ExtractPublicPropTypes, throwError } from '../../_utils'
+import { h, defineComponent, inject, renderSlot, computed } from 'vue'
+import { throwError } from '../../_utils'
 import { uploadInjectionKey } from './interface'
 import NUploadDragger from './UploadDragger'
 
-const uploadTriggerProps = {
-  abstract: {
-    type: Boolean,
-    default: false
-  }
-} as const
-export type UploadTriggerProps = ExtractPublicPropTypes<
-  typeof uploadTriggerProps
->
-
 export default defineComponent({
   name: 'UploadTrigger',
-  props: uploadTriggerProps,
-  setup (props, { slots }) {
+  setup (_, { slots }) {
     const NUpload = inject(uploadInjectionKey, null)
     if (!NUpload) {
       throwError(
@@ -33,12 +22,11 @@ export default defineComponent({
       openFileDialog,
       draggerInsideRef,
       handleFileAddition,
-      abstractRef: parentAbstract
+      abstractRef
     } = NUpload
 
-    const isImageCardType = listTypeRef.value === 'image-card'
-    const mergedAbstractRef = computed(
-      () => parentAbstract.value && props.abstract
+    const isImageCardTypeRef = computed(
+      () => listTypeRef.value === 'image-card'
     )
 
     function handleTriggerClick (): void {
@@ -69,19 +57,19 @@ export default defineComponent({
     }
 
     return () =>
-      mergedAbstractRef.value ? (
+      abstractRef.value ? (
         renderSlot(slots, 'default', {
-          handleTriggerClick,
-          handleTriggerDrop,
-          handleTriggerDragOver,
-          handleTriggerDragEnter,
-          handleTriggerDragLeave
+          handleClick: handleTriggerClick,
+          handleDrop: handleTriggerDrop,
+          handleDragOver: handleTriggerDragOver,
+          handleDragEnter: handleTriggerDragEnter,
+          handleDragLeave: handleTriggerDragLeave
         })
       ) : (
         <div
           class={[
             `${mergedClsPrefixRef.value}-upload__trigger`,
-            isImageCardType &&
+            isImageCardTypeRef.value &&
               `${mergedClsPrefixRef.value}-upload__trigger--image-card`
           ]}
           onClick={handleTriggerClick}
@@ -90,7 +78,11 @@ export default defineComponent({
           onDragenter={handleTriggerDragEnter}
           onDragleave={handleTriggerDragLeave}
         >
-          {isImageCardType ? <NUploadDragger>{slots}</NUploadDragger> : slots}
+          {isImageCardTypeRef.value ? (
+            <NUploadDragger>{slots}</NUploadDragger>
+          ) : (
+            slots
+          )}
         </div>
       )
   }
diff --git a/src/upload/src/styles/index.cssr.ts b/src/upload/src/styles/index.cssr.ts
index e97eebca4c0..6a8de004419 100644
--- a/src/upload/src/styles/index.cssr.ts
+++ b/src/upload/src/styles/index.cssr.ts
@@ -4,12 +4,6 @@ import createIconSwitchTransition from '../../../_styles/transitions/icon-switch
 
 export default c([
   cB('upload', [
-    cE('file-input', `
-      display: block;
-      width: 0;
-      height: 0;
-      opacity: 0;
-    `),
     cE('trigger', `
       display: inline-block;
       box-sizing: border-box;
@@ -70,23 +64,23 @@ export default c([
     ])
   ]),
   cB('upload-file-list', `
-  margin-top: 8px;
-  line-height: var(--line-height);
+    margin-top: 8px;
+    line-height: var(--line-height);
   `, [
     cM('grid', `
-    display: grid;
-    grid-template-columns: repeat(auto-fill, 96px);
-    grid-gap: 8px;
-    margin-top: 0;
-  `),
+      display: grid;
+      grid-template-columns: repeat(auto-fill, 96px);
+      grid-gap: 8px;
+      margin-top: 0;
+    `),
     cB('upload-file', `
-    display: block;
-    box-sizing: border-box;
-    cursor: default;
-    padding: 0px 12px 0 6px;
-    transition: background-color .3s  var(--bezier);
-    border-radius: var(--border-radius);
-  `, [
+      display: block;
+      box-sizing: border-box;
+      cursor: default;
+      padding: 0px 12px 0 6px;
+      transition: background-color .3s  var(--bezier);
+      border-radius: var(--border-radius);
+    `, [
       fadeInHeightExpand(),
       cB('progress', [
         fadeInHeightExpand({
@@ -94,108 +88,108 @@ export default c([
         })
       ]),
       c('&:hover', `
-      background-color: var(--item-color-hover);
-    `, [
+          background-color: var(--item-color-hover);
+      `, [
         cB('upload-file-info', [
           cE('action', `
-          opacity: 1;
-        `)
+            opacity: 1;
+          `)
         ])
       ]),
       cM('image-type', `
-      border-radius: var(--border-radius);
-      text-decoration: underline;
-      text-decoration-color: #0000;
-    `, [
-        cB('upload-file-info', `
-        padding-top: 0px;
-        padding-bottom: 0px;
-        width: 100%;
-        height: 100%;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        padding: 6px 0;
+        border-radius: var(--border-radius);
+        text-decoration: underline;
+        text-decoration-color: #0000;
       `, [
-          cB('progress', `
-          padding: 2px 0;
-          margin-bottom: 0;
-        `),
-          cE('name', `
-          padding: 0 8px;
-        `),
-          cE('thumbnail', `
-          width: 32px;
-          height: 32px;
-          font-size: 28px;
+        cB('upload-file-info', `
+          padding-top: 0px;
+          padding-bottom: 0px;
+          width: 100%;
+          height: 100%;
           display: flex;
-          justify-content: center;
+          justify-content: space-between;
           align-items: center;
+          padding: 6px 0;
         `, [
+          cB('progress', `
+            padding: 2px 0;
+            margin-bottom: 0;
+          `),
+          cE('name', `
+            padding: 0 8px;
+          `),
+          cE('thumbnail', `
+            width: 32px;
+            height: 32px;
+            font-size: 28px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+          `, [
             c('img', `
-            width: 100%;
-          `)
+              width: 100%;
+            `)
           ])
         ])
       ]),
       cM('text-type', [
         cB('progress', `
-        box-sizing: border-box;
-        padding-bottom: 6px;
-        margin-bottom: 6px;
-      `)
+          box-sizing: border-box;
+          padding-bottom: 6px;
+          margin-bottom: 6px;
+        `)
       ]),
       cM('image-card-type', `
-      position: relative;
-      width: 96px;
-      height: 96px;
-      border: var(--item-border-image-card);
-      border-radius: var(--border-radius);
-      padding: 0;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      transition: border-color .3s var(--bezier), background-color .3s var(--bezier);
-      border-radius: var(--border-radius);
-    `, [
-        cB('progress', `
-        position: absolute;
-        left: 8px;
-        bottom: 8px;
-        right: 8px;
-        width: unset;
-      `),
-        cB('upload-file-info', `
+        position: relative;
+        width: 96px;
+        height: 96px;
+        border: var(--item-border-image-card);
+        border-radius: var(--border-radius);
         padding: 0;
-        width: 100%;
-        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition: border-color .3s var(--bezier), background-color .3s var(--bezier);
+        border-radius: var(--border-radius);
       `, [
-          cE('thumbnail', `
+        cB('progress', `
+          position: absolute;
+          left: 8px;
+          bottom: 8px;
+          right: 8px;
+          width: unset;
+        `),
+        cB('upload-file-info', `
+          padding: 0;
           width: 100%;
           height: 100%;
-          display: flex;
-          flex-direction: column;
-          align-items: center;
-          justify-content: center;
-          font-size: 36px;
         `, [
-            c('img', `
+          cE('thumbnail', `
             width: 100%;
-          `)
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            font-size: 36px;
+          `, [
+            c('img', `
+              width: 100%;
+            `)
           ])
         ]),
         c('&::before', `
-        position: absolute;
-        z-index: 1;
-        left: 0;
-        right: 0;
-        top: 0;
-        bottom: 0;
-        border-radius: inherit;
-        opacity: 0;
-        transition: opacity .2s var(--bezier);
-        content: "";
-      `),
+          position: absolute;
+          z-index: 1;
+          left: 0;
+          right: 0;
+          top: 0;
+          bottom: 0;
+          border-radius: inherit;
+          opacity: 0;
+          transition: opacity .2s var(--bezier);
+          content: "";
+        `),
         c('&:hover', [
           c('&::before', 'opacity: 1;'),
           cB('upload-file-info', [
@@ -205,63 +199,63 @@ export default c([
       ]),
       cM('error-status', [
         c('&:hover', `
-        background-color: var(--item-color-hover-error);
-      `),
+          background-color: var(--item-color-hover-error);
+        `),
         cB('upload-file-info', [
           cE('name', 'color: var(--item-text-color-error);'),
           cE('thumbnail', 'color: var(--item-text-color-error);')
         ]),
         cM('image-card-type', `
-        border: var(--item-border-image-card-error);
-      `)
+          border: var(--item-border-image-card-error);
+        `)
       ]),
       cM('with-url', `
-      cursor: pointer;
-    `, [
+        cursor: pointer;
+      `, [
         cB('upload-file-info', [
           cE('name', `
-          color: var(--item-text-color-success);
-          text-decoration-color: var(--item-text-color-success);
-        `, [
+            color: var(--item-text-color-success);
+            text-decoration-color: var(--item-text-color-success);
+          `, [
             c('a', `
-            text-decoration: underline;
-          `)
+              text-decoration: underline;
+            `)
           ])
         ])
       ]),
       cB('upload-file-info', `
-      position: relative;
-      padding-top: 6px;
-      padding-bottom: 6px;
-      display: flex;
-      flex-wrap: nowrap;
-    `, [
-        cE('thumbnail', `
-        font-size: 18px;
-        opacity: 1;
-        transition: opacity .2s var(--bezier);
-        color: var(--item-icon-color);
+        position: relative;
+        padding-top: 6px;
+        padding-bottom: 6px;
+        display: flex;
+        flex-wrap: nowrap;
       `, [
+        cE('thumbnail', `
+          font-size: 18px;
+          opacity: 1;
+          transition: opacity .2s var(--bezier);
+          color: var(--item-icon-color);
+        `, [
           cB('base-icon', `
-          margin-right: 2px;
-          vertical-align: middle;
-          transition: color .3s var(--bezier);
-        `)
+            margin-right: 2px;
+            vertical-align: middle;
+            transition: color .3s var(--bezier);
+          `)
         ]),
         cE('action', `
-        padding-top: inherit;
-        padding-bottom: inherit;
-        position: absolute;
-        right: 0;
-        top: 0;
-        bottom: 0;
-        width: 80px;
-        display: flex;
-        align-items: center;
-        transition: opacity .2s var(--bezier);
-        justify-content: flex-end;
-        opacity: 0;
-      `, [
+          padding-top: inherit;
+          padding-bottom: inherit;
+          position: absolute;
+          right: 0;
+          top: 0;
+          bottom: 0;
+          width: 80px;
+          display: flex;
+          align-items: center;
+          transition: opacity .2s var(--bezier);
+          justify-content: flex-end;
+          opacity: 0;
+        `, [
           cB('button', [
             c('&:not(:last-child)', {
               marginRight: '4px'
@@ -273,44 +267,50 @@ export default c([
             ])
           ]),
           cM('image-type', `
-          position: relative;
-          max-width: 80px;
-          width: auto;
-        `),
+            position: relative;
+            max-width: 80px;
+            width: auto;
+          `),
           cM('image-card-type', `
-          z-index: 2;
-          position: absolute;
-          width: 100%;
-          height: 100%;
-          left: 0;
-          right: 0;
-          bottom: 0;
-          top: 0;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-        `)
+            z-index: 2;
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            top: 0;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+          `)
         ]),
         cE('name', `
-        color: var(--item-text-color);
-        flex: 1;
-        display: flex;
-        justify-content: center;
-        text-overflow: ellipsis;
-        overflow: hidden;
-        flex-direction: column;
-        text-decoration-color: #0000;
-        font-size: var(--font-size);
-        transition:
-          color .3s var(--bezier),
-          text-decoration-color .3s var(--bezier); 
-      `, [
+          color: var(--item-text-color);
+          flex: 1;
+          display: flex;
+          justify-content: center;
+          text-overflow: ellipsis;
+          overflow: hidden;
+          flex-direction: column;
+          text-decoration-color: #0000;
+          font-size: var(--font-size);
+          transition:
+            color .3s var(--bezier),
+            text-decoration-color .3s var(--bezier); 
+        `, [
           c('a', `
-          color: inherit;
-          text-decoration: underline;
-        `)
+            color: inherit;
+            text-decoration: underline;
+          `)
         ])
       ])
     ])
-  ])
+  ]),
+  cB('upload__file-input', `
+    display: block;
+    width: 0;
+    height: 0;
+    opacity: 0;
+  `)
 ])