diff --git a/src/upload/hooks/useUpload.ts b/src/upload/hooks/useUpload.ts
index 077dc1a1e..5241b5972 100644
--- a/src/upload/hooks/useUpload.ts
+++ b/src/upload/hooks/useUpload.ts
@@ -1,7 +1,7 @@
 import { computed, h, ref, toRefs, ComputedRef } from 'vue';
 import isFunction from 'lodash/isFunction';
 import isString from 'lodash/isString';
-import type { SizeLimitObj, TdUploadProps, UploadChangeContext, UploadFile, UploadRemoveContext } from '../type';
+import { SizeLimitObj, TdUploadProps, UploadChangeContext, UploadFile, UploadRemoveContext } from '../type';
 import { useVModel } from '../../shared';
 import {
   formatToUploadFile,
diff --git a/src/upload/upload.tsx b/src/upload/upload.tsx
index 4aad342b5..1feda9a9c 100644
--- a/src/upload/upload.tsx
+++ b/src/upload/upload.tsx
@@ -2,8 +2,8 @@ import { defineComponent, ref, computed, toRefs } from 'vue';
 import { AddIcon, LoadingIcon, CloseIcon, CloseCircleIcon } from 'tdesign-icons-vue-next';
 import TImage from '../image';
 import TImageViewer from '../image-viewer';
-import { TdUploadProps, UploadFile } from './type';
-import props from './props';
+import { UploadFile } from './type';
+import UploadProps from './props';
 import config from '../config';
 import useUpload from './hooks/useUpload';
 import { useTNodeJSX, useContent } from '../hooks/tnode';
@@ -13,7 +13,15 @@ const { prefix } = config;
 
 export default defineComponent({
   name: `${prefix}-upload`,
-  props,
+  components: {
+    AddIcon,
+    LoadingIcon,
+    CloseCircleIcon,
+    CloseIcon,
+    TImage,
+    TImageViewer,
+  },
+  props: UploadProps,
   emits: [
     'update:files',
     'update:modelValue',
@@ -87,13 +95,13 @@ export default defineComponent({
           <div class={`${uploadClass.value}__progress-mask`}>
             {file.status === 'progress' ? (
               <>
-                <LoadingIcon class={`${uploadClass.value}__progress-loading`} size="24" />
+                <loading-icon class={`${uploadClass.value}__progress-loading`} size="24" />
                 <div class={`${uploadClass.value}__progress-text`}>
                   {file.percent ? `${file.percent}%` : globalConfig.value.progress.uploadingText}
                 </div>
               </>
             ) : (
-              <CloseCircleIcon size="24" />
+              <close-circle-icon size="24" />
             )}
             {file.status === 'fail' && (
               <div class={`${uploadClass.value}__progress-text`}>{globalConfig.value.progress.failText}</div>
@@ -112,79 +120,80 @@ export default defineComponent({
         }
         return (
           <div class={`${uploadClass.value}__item ${uploadClass.value}__item--add`} onClick={triggerUpload}>
-            <div class={`${uploadClass.value}__add-icon`}>{addContent || <AddIcon size="28" />}</div>
+            <div class={`${uploadClass.value}__add-icon`}>{addContent || <add-icon size="28" />}</div>
           </div>
         );
       }
     };
+
+    return {
+      ...toRefs(props),
+      uploadClass,
+      globalConfig,
+      initialIndex,
+      showViewer,
+      previewImgs,
+      toUploadFiles,
+      uploadValue,
+      displayFiles,
+      sizeOverLimitMessage,
+      uploading,
+      inputRef,
+      disabled,
+      xhrReq,
+      handlePreview,
+      triggerUpload,
+      uploadFilePercent,
+      uploadFiles,
+      onFileChange,
+      onNormalFileChange,
+      onInnerRemove,
+      cancelUpload,
+      handleImageClose,
+      renderStatus,
+      content,
+    };
+  },
+
+  render() {
     return (
-      <div class={`${uploadClass.value}`}>
-        {displayFiles.value.map((file, index) => (
-          <div
-            key={index}
-            class={`${uploadClass.value}__item`}
-            onClick={(e: MouseEvent) => handlePreview(e, file, index)}
-          >
+      <div class={`${this.uploadClass}`}>
+        {this.displayFiles.map((file, index) => (
+          <div key={index} class={`${this.uploadClass}__item`}>
             {file.url && (
-              <TImage
-                class={`${uploadClass.value}__image`}
+              <t-image
+                class={`${this.uploadClass}__image`}
                 shape="round"
-                {...(props.imageProps as TdUploadProps['imageProps'])}
+                {...(this.$props.imageProps as object)}
                 src={file.url}
+                onClick={(e: MouseEvent) => this.handlePreview(e, file, index)}
               />
             )}
-            {renderStatus(file)}
-            <CloseIcon
-              class={`${uploadClass.value}__delete-btn`}
-              onClick={({ e }: any) => onInnerRemove({ e, file, index })}
+            {this.renderStatus(file)}
+            <close-icon
+              class={`${this.uploadClass}__delete-btn`}
+              onClick={({ e }: any) => this.onInnerRemove({ e, file, index })}
             />
           </div>
         ))}
-        {content()}
+        {this.content()}
         <input
           ref="inputRef"
-          value={props.files}
+          value={this.$props.files}
           type="file"
-          multiple={props.multiple}
+          multiple={this.$props.multiple}
           hidden
-          capture={props.capture as unknown as boolean}
-          accept={props.accept}
-          onChange={onNormalFileChange}
+          capture={this.$props.capture as unknown as boolean}
+          accept={this.$props.accept}
+          onChange={this.onNormalFileChange}
         />
-        <TImageViewer
-          visible={showViewer.value}
-          images={previewImgs.value}
-          index={initialIndex.value}
-          onClose={handleImageClose}
+        <t-image-viewer
+          visible={this.showViewer}
+          images={this.previewImgs}
+          index={this.initialIndex}
+          onClose={this.handleImageClose}
         />
       </div>
     );
-    // return {
-    //   ...toRefs(props),
-    //   uploadClass,
-    //   globalConfig,
-    //   initialIndex,
-    //   showViewer,
-    //   previewImgs,
-    //   toUploadFiles,
-    //   uploadValue,
-    //   displayFiles,
-    //   sizeOverLimitMessage,
-    //   uploading,
-    //   inputRef,
-    //   disabled,
-    //   // xhrReq,
-    //   handlePreview,
-    //   triggerUpload,
-    //   uploadFilePercent,
-    //   uploadFiles,
-    //   onFileChange,
-    //   onNormalFileChange,
-    //   onInnerRemove,
-    //   cancelUpload,
-    //   handleImageClose,
-    //   renderStatus,
-    //   content,
-    // };
   },
 });