feat: update upload

src/upload/upload.tsx

@@ -2,7 +2,7 @@ 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 { UploadFile } from './type';
+import { TdUploadProps, UploadFile } from './type';
 import UploadProps from './props';
 import config from '../config';
 import useUpload from './hooks/useUpload';
@@ -15,11 +15,7 @@ export default defineComponent({
   name: `${prefix}-upload`,
   components: {
     AddIcon,
-    LoadingIcon,
-    CloseCircleIcon,
-    CloseIcon,
     TImage,
-    TImageViewer,
   },
   props: UploadProps,
   emits: [
@@ -35,22 +31,17 @@ export default defineComponent({
     'validate',
     'click-upload',
   ],
-  setup(props) {
+  setup(props, { expose }) {
     const uploadClass = usePrefixClass('upload');
     const { globalConfig } = useConfig('upload');
 
     const {
-      toUploadFiles,
-      uploadValue,
+      disabled,
       displayFiles,
-      sizeOverLimitMessage,
       uploading,
       inputRef,
-      disabled,
-      xhrReq,
       uploadFilePercent,
       uploadFiles,
-      onFileChange,
       onNormalFileChange,
       onInnerRemove,
       cancelUpload,
@@ -95,13 +86,13 @@ export default defineComponent({
           <div class={`${uploadClass.value}__progress-mask`}>
             {file.status === 'progress' ? (
               <>
-                <loading-icon class={`${uploadClass.value}__progress-loading`} size="24" />
+                <LoadingIcon class={`${uploadClass.value}__progress-loading`} size="24" />
                 <div class={`${uploadClass.value}__progress-text`}>
                   {file.percent ? `${file.percent}%` : globalConfig.value.progress.uploadingText}
                 </div>
               </>
             ) : (
-              <close-circle-icon size="24" />
+              <CloseCircleIcon size="24" />
             )}
             {file.status === 'fail' && (
               <div class={`${uploadClass.value}__progress-text`}>{globalConfig.value.progress.failText}</div>
@@ -120,80 +111,59 @@ export default defineComponent({
         }
         return (
           <div class={`${uploadClass.value}__item ${uploadClass.value}__item--add`} onClick={triggerUpload}>
-            <div class={`${uploadClass.value}__add-icon`}>{addContent || <add-icon size="28" />}</div>
+            <div class={`${uploadClass.value}__add-icon`}>{addContent || <AddIcon size="28" />}</div>
           </div>
         );
       }
     };
-
-    return {
-      ...toRefs(props),
-      uploadClass,
-      globalConfig,
-      initialIndex,
-      showViewer,
-      previewImgs,
-      toUploadFiles,
-      uploadValue,
-      displayFiles,
-      sizeOverLimitMessage,
+    expose({
+      upload: inputRef.value,
       uploading,
-      inputRef,
-      disabled,
-      xhrReq,
-      handlePreview,
       triggerUpload,
-      uploadFilePercent,
       uploadFiles,
-      onFileChange,
-      onNormalFileChange,
-      onInnerRemove,
       cancelUpload,
-      handleImageClose,
-      renderStatus,
-      content,
-    };
-  },
-
-  render() {
-    return (
-      <div class={`${this.uploadClass}`}>
-        {this.displayFiles.map((file, index) => (
-          <div key={index} class={`${this.uploadClass}__item`}>
-            {file.url && (
-              <t-image
-                class={`${this.uploadClass}__image`}
-                shape="round"
-                {...(this.$props.imageProps as object)}
-                src={file.url}
-                onClick={(e: MouseEvent) => this.handlePreview(e, file, index)}
+      uploadFilePercent,
+    });
+    return () => {
+      return (
+        <div class={`${uploadClass.value}`}>
+          {displayFiles.value.map((file, index) => (
+            <div key={index} class={`${uploadClass.value}__item`}>
+              {file.url && (
+                <t-image
+                  class={`${uploadClass.value}__image`}
+                  shape="round"
+                  {...(props.imageProps as TdUploadProps['imageProps'])}
+                  src={file.url}
+                  onClick={(e: MouseEvent) => 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>
-        ))}
-        {this.content()}
-        <input
-          ref="inputRef"
-          value={this.$props.files}
-          type="file"
-          multiple={this.$props.multiple}
-          hidden
-          capture={this.$props.capture as unknown as boolean}
-          accept={this.$props.accept}
-          onChange={this.onNormalFileChange}
-        />
-        <t-image-viewer
-          visible={this.showViewer}
-          images={this.previewImgs}
-          index={this.initialIndex}
-          onClose={this.handleImageClose}
-        />
-      </div>
-    );
+            </div>
+          ))}
+          {content()}
+          <input
+            ref="inputRef"
+            value={props.files}
+            type="file"
+            multiple={props.multiple}
+            hidden
+            capture={props.capture as unknown as boolean}
+            accept={props.accept}
+            onChange={onNormalFileChange}
+          />
+          <TImageViewer
+            visible={showViewer.value}
+            images={previewImgs.value}
+            index={initialIndex.value}
+            onClose={handleImageClose}
+          />
+        </div>
+      );
+    };
   },
 });