vxe-pc-ui 4.20.34 → 4.20.35

package/es/upload/src/upload.js

@@ -29,1727 +29,1796 @@ function createInternalData() {
     // prevDragPos: ''
   };
 }
-var upload_default = defineVxeComponent({
-  name: "VxeUpload",
-  props: {
-    modelValue: [Array, String, Object],
-    showList: {
-      type: Boolean,
-      default: () => getConfig().upload.showList
-    },
-    moreConfig: Object,
-    readonly: {
-      type: Boolean,
-      default: null
-    },
-    disabled: {
-      type: Boolean,
-      default: null
-    },
-    autoSubmit: {
-      type: Boolean,
-      default: () => getConfig().upload.autoSubmit
-    },
-    mode: {
-      type: String,
-      default: () => getConfig().upload.mode
-    },
-    imageTypes: {
-      type: Array,
-      default: () => XEUtils.clone(getConfig().upload.imageTypes, true)
-    },
-    imageConfig: {
-      type: Object,
-      default: () => XEUtils.clone(getConfig().upload.imageConfig, true)
-    },
-    /**
-     * 已废弃，被 image-config 替换
-     * @deprecated
-     */
-    imageStyle: {
-      type: Object,
-      default: () => XEUtils.clone(getConfig().upload.imageStyle, true)
-    },
-    fileTypes: {
-      type: Array,
-      default: () => XEUtils.clone(getConfig().upload.fileTypes, true)
-    },
-    dragSort: Boolean,
-    dragToUpload: {
-      type: Boolean,
-      default: () => XEUtils.clone(getConfig().upload.dragToUpload, true)
-    },
-    dragPlaceholder: {
-      type: String,
-      default: () => getConfig().upload.dragPlaceholder
-    },
-    pasteToUpload: {
-      type: Boolean,
-      default: () => XEUtils.clone(getConfig().upload.pasteToUpload, true)
-    },
-    keyField: String,
-    singleMode: Boolean,
-    urlMode: Boolean,
-    urlArgs: {
-      type: Boolean,
-      default: () => getConfig().upload.urlArgs
-    },
-    multiple: Boolean,
-    limitSize: {
-      type: [String, Number],
-      default: () => getConfig().upload.limitSize
-    },
-    showLimitSize: {
-      type: Boolean,
-      default: () => getConfig().upload.showLimitSize
-    },
-    limitSizeText: {
-      type: [String, Number, Function],
-      default: () => getConfig().upload.limitSizeText
-    },
-    limitCount: {
-      type: [String, Number],
-      default: () => getConfig().upload.limitCount
-    },
-    showLimitCount: {
-      type: Boolean,
-      default: () => getConfig().upload.showLimitCount
-    },
-    limitCountText: {
-      type: [String, Number, Function],
-      default: () => getConfig().upload.limitCountText
-    },
-    nameField: {
-      type: String,
-      default: () => getConfig().upload.nameField
-    },
-    typeField: {
-      type: String,
-      default: () => getConfig().upload.typeField
-    },
-    urlField: {
-      type: String,
-      default: () => getConfig().upload.urlField
-    },
-    sizeField: {
-      type: String,
-      default: () => getConfig().upload.sizeField
-    },
-    showErrorStatus: {
-      type: Boolean,
-      default: () => getConfig().upload.showErrorStatus
-    },
-    showProgress: {
-      type: Boolean,
-      default: () => getConfig().upload.showProgress
-    },
-    progressText: {
-      type: [String, Number, Function],
-      default: () => getConfig().upload.progressText
-    },
-    previewImageConfig: Object,
-    showSubmitButton: Boolean,
-    autoHiddenButton: {
-      type: Boolean,
-      default: () => getConfig().upload.autoHiddenButton
-    },
-    showUploadButton: {
-      type: Boolean,
-      default: () => getConfig().upload.showUploadButton
-    },
-    buttonText: {
-      type: [String, Number, Function],
-      default: () => getConfig().upload.buttonText
-    },
-    buttonIcon: {
-      type: String,
-      default: () => getConfig().upload.buttonIcon
-    },
-    showButtonText: {
-      type: Boolean,
-      default: () => getConfig().upload.showButtonText
-    },
-    showButtonIcon: {
-      type: Boolean,
-      default: () => getConfig().upload.showButtonIcon
-    },
-    showRemoveButton: {
-      type: Boolean,
-      default: () => getConfig().upload.showRemoveButton
-    },
-    showDownloadButton: {
-      type: Boolean,
-      default: () => getConfig().upload.showDownloadButton
-    },
-    showPreview: {
-      type: Boolean,
-      default: () => getConfig().upload.showPreview
-    },
-    showTip: {
-      type: Boolean,
-      default: () => null
-    },
-    maxSimultaneousUploads: {
-      type: Number,
-      default: () => getConfig().upload.maxSimultaneousUploads
+var upload_default = (
+  /* define-vxe-component start */
+  defineVxeComponent({
+    name: "VxeUpload",
+    props: {
+      modelValue: [Array, String, Object],
+      showList: {
+        type: Boolean,
+        default: () => getConfig().upload.showList
+      },
+      moreConfig: Object,
+      readonly: {
+        type: Boolean,
+        default: null
+      },
+      disabled: {
+        type: Boolean,
+        default: null
+      },
+      autoSubmit: {
+        type: Boolean,
+        default: () => getConfig().upload.autoSubmit
+      },
+      mode: {
+        type: String,
+        default: () => getConfig().upload.mode
+      },
+      imageTypes: {
+        type: Array,
+        default: () => XEUtils.clone(getConfig().upload.imageTypes, true)
+      },
+      imageConfig: {
+        type: Object,
+        default: () => XEUtils.clone(getConfig().upload.imageConfig, true)
+      },
+      /**
+       * 已废弃，被 image-config 替换
+       * @deprecated
+       */
+      imageStyle: {
+        type: Object,
+        default: () => XEUtils.clone(getConfig().upload.imageStyle, true)
+      },
+      fileTypes: {
+        type: Array,
+        default: () => XEUtils.clone(getConfig().upload.fileTypes, true)
+      },
+      dragSort: Boolean,
+      dragToUpload: {
+        type: Boolean,
+        default: () => XEUtils.clone(getConfig().upload.dragToUpload, true)
+      },
+      dragPlaceholder: {
+        type: String,
+        default: () => getConfig().upload.dragPlaceholder
+      },
+      pasteToUpload: {
+        type: Boolean,
+        default: () => XEUtils.clone(getConfig().upload.pasteToUpload, true)
+      },
+      keyField: String,
+      singleMode: Boolean,
+      urlMode: Boolean,
+      urlArgs: {
+        type: Boolean,
+        default: () => getConfig().upload.urlArgs
+      },
+      multiple: Boolean,
+      limitSize: {
+        type: [String, Number],
+        default: () => getConfig().upload.limitSize
+      },
+      showLimitSize: {
+        type: Boolean,
+        default: () => getConfig().upload.showLimitSize
+      },
+      limitSizeText: {
+        type: [String, Number, Function],
+        default: () => getConfig().upload.limitSizeText
+      },
+      limitCount: {
+        type: [String, Number],
+        default: () => getConfig().upload.limitCount
+      },
+      showLimitCount: {
+        type: Boolean,
+        default: () => getConfig().upload.showLimitCount
+      },
+      limitCountText: {
+        type: [String, Number, Function],
+        default: () => getConfig().upload.limitCountText
+      },
+      nameField: {
+        type: String,
+        default: () => getConfig().upload.nameField
+      },
+      typeField: {
+        type: String,
+        default: () => getConfig().upload.typeField
+      },
+      urlField: {
+        type: String,
+        default: () => getConfig().upload.urlField
+      },
+      sizeField: {
+        type: String,
+        default: () => getConfig().upload.sizeField
+      },
+      showErrorStatus: {
+        type: Boolean,
+        default: () => getConfig().upload.showErrorStatus
+      },
+      showProgress: {
+        type: Boolean,
+        default: () => getConfig().upload.showProgress
+      },
+      progressText: {
+        type: [String, Number, Function],
+        default: () => getConfig().upload.progressText
+      },
+      previewImageConfig: Object,
+      showSubmitButton: Boolean,
+      autoHiddenButton: {
+        type: Boolean,
+        default: () => getConfig().upload.autoHiddenButton
+      },
+      showUploadButton: {
+        type: Boolean,
+        default: () => getConfig().upload.showUploadButton
+      },
+      buttonText: {
+        type: [String, Number, Function],
+        default: () => getConfig().upload.buttonText
+      },
+      buttonIcon: {
+        type: String,
+        default: () => getConfig().upload.buttonIcon
+      },
+      showButtonText: {
+        type: Boolean,
+        default: () => getConfig().upload.showButtonText
+      },
+      showButtonIcon: {
+        type: Boolean,
+        default: () => getConfig().upload.showButtonIcon
+      },
+      showRemoveButton: {
+        type: Boolean,
+        default: () => getConfig().upload.showRemoveButton
+      },
+      showDownloadButton: {
+        type: Boolean,
+        default: () => getConfig().upload.showDownloadButton
+      },
+      showPreview: {
+        type: Boolean,
+        default: () => getConfig().upload.showPreview
+      },
+      showTip: {
+        type: Boolean,
+        default: () => null
+      },
+      maxSimultaneousUploads: {
+        type: Number,
+        default: () => getConfig().upload.maxSimultaneousUploads
+      },
+      tipText: [String, Number, Function],
+      hintText: String,
+      previewMethod: Function,
+      beforeSelectMethod: Function,
+      uploadMethod: Function,
+      beforeRemoveMethod: Function,
+      removeMethod: Function,
+      beforeDownloadMethod: Function,
+      downloadMethod: Function,
+      getUrlMethod: Function,
+      getThumbnailUrlMethod: Function,
+      size: {
+        type: String,
+        default: () => getConfig().upload.size || getConfig().size
+      }
     },
-    tipText: [String, Number, Function],
-    hintText: String,
-    previewMethod: Function,
-    beforeSelectMethod: Function,
-    uploadMethod: Function,
-    beforeRemoveMethod: Function,
-    removeMethod: Function,
-    beforeDownloadMethod: Function,
-    downloadMethod: Function,
-    getUrlMethod: Function,
-    getThumbnailUrlMethod: Function,
-    size: {
-      type: String,
-      default: () => getConfig().upload.size || getConfig().size
-    }
-  },
-  emits: ["update:modelValue", "change", "add", "remove", "remove-fail", "download", "download-fail", "upload-start", "upload-success", "upload-error", "upload-end", "upload-queue-start", "upload-queue-end", "sort-dragend", "more-visible"],
-  setup(props, context) {
-    const { emit, slots } = context;
-    const $xeForm = inject("$xeForm", null);
-    const formItemInfo = inject("xeFormItemInfo", null);
-    const $xeTable = inject("$xeTable", null);
-    const xID = XEUtils.uniqueId();
-    const { computeSize } = useFns.useSize(props);
-    const refElem = ref();
-    const refPopupElem = ref();
-    const refDragLineElem = ref();
-    const refModalDragLineElem = ref();
-    const reactData = reactive(createReactData());
-    const internalData = createInternalData();
-    const refMaps = {
-      refElem
-    };
-    const computeFormReadonly = computed(() => {
-      const { readonly } = props;
-      if (readonly === null) {
-        if ($xeForm) {
-          return $xeForm.props.readonly;
+    emits: ["update:modelValue", "change", "add", "remove", "remove-fail", "download", "download-fail", "upload-start", "upload-success", "upload-error", "upload-end", "upload-queue-start", "upload-queue-end", "sort-dragend", "more-visible"],
+    setup(props, context) {
+      const { emit, slots } = context;
+      const $xeForm = inject("$xeForm", null);
+      const formItemInfo = inject("xeFormItemInfo", null);
+      const $xeTable = inject("$xeTable", null);
+      const xID = XEUtils.uniqueId();
+      const { computeSize } = useFns.useSize(props);
+      const refElem = ref();
+      const refPopupElem = ref();
+      const refDragLineElem = ref();
+      const refModalDragLineElem = ref();
+      const reactData = reactive(createReactData());
+      const internalData = createInternalData();
+      const refMaps = {
+        refElem
+      };
+      const computeFormReadonly = computed(() => {
+        const { readonly } = props;
+        if (readonly === null) {
+          if ($xeForm) {
+            return $xeForm.props.readonly;
+          }
+          return false;
         }
-        return false;
-      }
-      return readonly;
-    });
-    const computeIsDisabled = computed(() => {
-      const { disabled } = props;
-      if (disabled === null) {
-        if ($xeForm) {
-          return $xeForm.props.disabled;
+        return readonly;
+      });
+      const computeIsDisabled = computed(() => {
+        const { disabled } = props;
+        if (disabled === null) {
+          if ($xeForm) {
+            return $xeForm.props.disabled;
+          }
+          return false;
         }
-        return false;
-      }
-      return disabled;
-    });
-    const computeKeyField = computed(() => {
-      return props.keyField || "_X_KEY";
-    });
-    const computeIsImage = computed(() => {
-      return props.mode === "image";
-    });
-    const computeNameProp = computed(() => {
-      return props.nameField || "name";
-    });
-    const computeTypeProp = computed(() => {
-      return props.typeField || "type";
-    });
-    const computeUrlProp = computed(() => {
-      return props.urlField || "url";
-    });
-    const computeSizeProp = computed(() => {
-      return props.sizeField || "size";
-    });
-    const computeLimitMaxSize = computed(() => {
-      return XEUtils.toNumber(props.limitSize) * 1024 * 1024;
-    });
-    const computeLimitMaxCount = computed(() => {
-      return props.multiple ? XEUtils.toNumber(props.limitCount) : 1;
-    });
-    const computePreviewImageOpts = computed(() => {
-      const { showDownloadButton } = props;
-      return Object.assign(
-        {
-          showDownloadButton
-        },
-        getConfig().upload.previewImageConfig,
-        props.previewImageConfig
-      );
-    });
-    const computeOverCount = computed(() => {
-      const { multiple } = props;
-      const { fileList } = reactData;
-      const limitMaxCount = computeLimitMaxCount.value;
-      if (multiple) {
-        if (limitMaxCount) {
-          return fileList.length >= limitMaxCount;
+        return disabled;
+      });
+      const computeKeyField = computed(() => {
+        return props.keyField || "_X_KEY";
+      });
+      const computeIsImage = computed(() => {
+        return props.mode === "image";
+      });
+      const computeNameProp = computed(() => {
+        return props.nameField || "name";
+      });
+      const computeTypeProp = computed(() => {
+        return props.typeField || "type";
+      });
+      const computeUrlProp = computed(() => {
+        return props.urlField || "url";
+      });
+      const computeSizeProp = computed(() => {
+        return props.sizeField || "size";
+      });
+      const computeLimitMaxSize = computed(() => {
+        return XEUtils.toNumber(props.limitSize) * 1024 * 1024;
+      });
+      const computeLimitMaxCount = computed(() => {
+        return props.multiple ? XEUtils.toNumber(props.limitCount) : 1;
+      });
+      const computePreviewImageOpts = computed(() => {
+        const { showDownloadButton } = props;
+        return Object.assign(
+          {
+            showDownloadButton
+          },
+          getConfig().upload.previewImageConfig,
+          props.previewImageConfig
+        );
+      });
+      const computeOverCount = computed(() => {
+        const { multiple } = props;
+        const { fileList } = reactData;
+        const limitMaxCount = computeLimitMaxCount.value;
+        if (multiple) {
+          if (limitMaxCount) {
+            return fileList.length >= limitMaxCount;
+          }
+          return true;
         }
-        return true;
-      }
-      return fileList.length >= 1;
-    });
-    const computeLimitSizeUnit = computed(() => {
-      const limitSize = XEUtils.toNumber(props.limitSize);
-      if (limitSize) {
-        if (limitSize > 1048576) {
-          return `${limitSize / 1048576}T`;
+        return fileList.length >= 1;
+      });
+      const computeLimitSizeUnit = computed(() => {
+        const limitSize = XEUtils.toNumber(props.limitSize);
+        if (limitSize) {
+          if (limitSize > 1048576) {
+            return `${limitSize / 1048576}T`;
+          }
+          if (limitSize > 1024) {
+            return `${limitSize / 1024}G`;
+          }
+          return `${limitSize}M`;
         }
-        if (limitSize > 1024) {
-          return `${limitSize / 1024}G`;
+        return "";
+      });
+      const computedShowTipText = computed(() => {
+        const { showTip, tipText } = props;
+        if (XEUtils.isBoolean(showTip)) {
+          return showTip;
         }
-        return `${limitSize}M`;
-      }
-      return "";
-    });
-    const computedShowTipText = computed(() => {
-      const { showTip, tipText } = props;
-      if (XEUtils.isBoolean(showTip)) {
-        return showTip;
-      }
-      const defShowTip = getConfig().upload.showTip;
-      if (XEUtils.isBoolean(defShowTip)) {
-        return defShowTip;
-      }
-      if (tipText) {
-        return true;
-      }
-      return false;
-    });
-    const computedDefTipText = computed(() => {
-      const { limitSize, fileTypes, multiple, limitCount } = props;
-      const tipText = props.tipText || props.hintText;
-      const isImage = computeIsImage.value;
-      const limitSizeUnit = computeLimitSizeUnit.value;
-      if (XEUtils.isString(tipText)) {
-        return tipText;
-      }
-      if (XEUtils.isFunction(tipText)) {
-        return `${tipText({})}`;
-      }
-      const defTips = [];
-      if (isImage) {
-        if (multiple && limitCount) {
-          defTips.push(getI18n("vxe.upload.imgCountHint", [limitCount]));
+        const defShowTip = getConfig().upload.showTip;
+        if (XEUtils.isBoolean(defShowTip)) {
+          return defShowTip;
         }
-        if (limitSize && limitSizeUnit) {
-          defTips.push(getI18n("vxe.upload.imgSizeHint", [limitSizeUnit]));
+        if (tipText) {
+          return true;
         }
-      } else {
-        if (fileTypes && fileTypes.length) {
-          defTips.push(getI18n("vxe.upload.fileTypeHint", [fileTypes.join("/")]));
+        return false;
+      });
+      const computedDefTipText = computed(() => {
+        const { limitSize, fileTypes, multiple, limitCount } = props;
+        const tipText = props.tipText || props.hintText;
+        const isImage = computeIsImage.value;
+        const limitSizeUnit = computeLimitSizeUnit.value;
+        if (XEUtils.isString(tipText)) {
+          return tipText;
         }
-        if (limitSize && limitSizeUnit) {
-          defTips.push(getI18n("vxe.upload.fileSizeHint", [limitSizeUnit]));
+        if (XEUtils.isFunction(tipText)) {
+          return `${tipText({})}`;
         }
-        if (multiple && limitCount) {
-          defTips.push(getI18n("vxe.upload.fileCountHint", [limitCount]));
+        const defTips = [];
+        if (isImage) {
+          if (multiple && limitCount) {
+            defTips.push(getI18n("vxe.upload.imgCountHint", [limitCount]));
+          }
+          if (limitSize && limitSizeUnit) {
+            defTips.push(getI18n("vxe.upload.imgSizeHint", [limitSizeUnit]));
+          }
+        } else {
+          if (fileTypes && fileTypes.length) {
+            defTips.push(getI18n("vxe.upload.fileTypeHint", [fileTypes.join("/")]));
+          }
+          if (limitSize && limitSizeUnit) {
+            defTips.push(getI18n("vxe.upload.fileSizeHint", [limitSizeUnit]));
+          }
+          if (multiple && limitCount) {
+            defTips.push(getI18n("vxe.upload.fileCountHint", [limitCount]));
+          }
         }
-      }
-      return defTips.join(getI18n("vxe.base.comma"));
-    });
-    const computeImageOpts = computed(() => {
-      return Object.assign({}, props.imageConfig || props.imageStyle);
-    });
-    const computeImgStyle = computed(() => {
-      const imageOpts = computeImageOpts.value;
-      const { width, height } = imageOpts;
-      const stys = {};
-      if (width) {
-        stys.width = toCssUnit(width);
-      }
-      if (height) {
-        stys.height = toCssUnit(height);
-      }
-      return stys;
-    });
-    const computeMoreOpts = computed(() => {
-      return Object.assign({ showMoreButton: true }, props.moreConfig);
-    });
-    const computeMaps = {
-      computeUrlProp
-    };
-    const $xeUpload = {
-      xID,
-      props,
-      context,
-      reactData,
-      internalData,
-      getRefMaps: () => refMaps,
-      getComputeMaps: () => computeMaps
-    };
-    const getUniqueKey = () => {
-      return XEUtils.uniqueId();
-    };
-    const getFieldKey = (item) => {
-      const keyField = computeKeyField.value;
-      return item[keyField];
-    };
-    const updateFileList = () => {
-      const { modelValue, multiple } = props;
-      const formReadonly = computeFormReadonly.value;
-      const keyField = computeKeyField.value;
-      const nameProp = computeNameProp.value;
-      const typeProp = computeTypeProp.value;
-      const urlProp = computeUrlProp.value;
-      const sizeProp = computeSizeProp.value;
-      const fileList = modelValue ? (modelValue ? XEUtils.isArray(modelValue) ? modelValue : [modelValue] : []).map((item) => {
-        if (!item || XEUtils.isString(item)) {
-          const url = `${item || ""}`;
-          const urlObj = XEUtils.parseUrl(item);
-          const name2 = (urlObj ? urlObj.searchQuery[nameProp] : "") || parseFileName(url);
-          return {
-            [nameProp]: name2,
-            [typeProp]: (urlObj ? urlObj.searchQuery[typeProp] : "") || parseFileType(name2),
-            [urlProp]: url,
-            [sizeProp]: XEUtils.toNumber(urlObj ? urlObj.searchQuery[sizeProp] : 0) || 0,
-            [keyField]: getUniqueKey()
-          };
+        return defTips.join(getI18n("vxe.base.comma"));
+      });
+      const computeImageOpts = computed(() => {
+        return Object.assign({}, props.imageConfig || props.imageStyle);
+      });
+      const computeImgStyle = computed(() => {
+        const imageOpts = computeImageOpts.value;
+        const { width, height } = imageOpts;
+        const stys = {};
+        if (width) {
+          stys.width = toCssUnit(width);
         }
-        const name = item[nameProp] || "";
-        item[nameProp] = name;
-        item[typeProp] = item[typeProp] || parseFileType(name);
-        item[urlProp] = item[urlProp] || "";
-        item[sizeProp] = item[sizeProp] || 0;
-        item[keyField] = item[keyField] || getUniqueKey();
-        return item;
-      }) : [];
-      reactData.fileList = formReadonly || multiple ? fileList : fileList.slice(0, 1);
-    };
-    const parseFileName = (url) => {
-      return decodeURIComponent(`${url || ""}`).split("/").pop() || "";
-    };
-    const parseFileType = (name) => {
-      const index = name.lastIndexOf(".");
-      if (index > 0) {
-        return name.substring(index + 1).toLowerCase();
-      }
-      return "";
-    };
-    const dispatchEvent = (type, params, evnt) => {
-      emit(type, createEvent(evnt, { $upload: $xeUpload }, params));
-    };
-    const emitModel = (value) => {
-      emit("update:modelValue", value);
-    };
-    const handleModel = (vals) => {
-      const { singleMode, urlMode, urlArgs } = props;
-      const urlProp = computeUrlProp.value;
-      const nameProp = computeNameProp.value;
-      let restList = vals ? vals.slice(0) : [];
-      if (urlMode) {
-        restList = restList.map((item) => {
-          const url = item[urlProp];
-          if (url && urlArgs) {
-            const urlObj = XEUtils.parseUrl(url);
-            if (!urlObj.searchQuery[nameProp]) {
-              if (url.indexOf("blob:") === -1) {
-                return `${url}${url.indexOf("?") === -1 ? "?" : "&"}${nameProp}=${encodeURIComponent(item[nameProp] || "")}`;
+        if (height) {
+          stys.height = toCssUnit(height);
+        }
+        return stys;
+      });
+      const computeMoreOpts = computed(() => {
+        return Object.assign({ showMoreButton: true }, props.moreConfig);
+      });
+      const computeMaps = {
+        computeUrlProp
+      };
+      const $xeUpload = {
+        xID,
+        props,
+        context,
+        reactData,
+        internalData,
+        getRefMaps: () => refMaps,
+        getComputeMaps: () => computeMaps
+      };
+      const getUniqueKey = () => {
+        return XEUtils.uniqueId();
+      };
+      const getFieldKey = (item) => {
+        const keyField = computeKeyField.value;
+        return item[keyField];
+      };
+      const updateFileList = () => {
+        const { modelValue, multiple } = props;
+        const formReadonly = computeFormReadonly.value;
+        const keyField = computeKeyField.value;
+        const nameProp = computeNameProp.value;
+        const typeProp = computeTypeProp.value;
+        const urlProp = computeUrlProp.value;
+        const sizeProp = computeSizeProp.value;
+        const fileList = modelValue ? (modelValue ? XEUtils.isArray(modelValue) ? modelValue : [modelValue] : []).map((item) => {
+          if (!item || XEUtils.isString(item)) {
+            const url = `${item || ""}`;
+            const urlObj = XEUtils.parseUrl(item);
+            const name2 = (urlObj ? urlObj.searchQuery[nameProp] : "") || parseFileName(url);
+            return {
+              [nameProp]: name2,
+              [typeProp]: (urlObj ? urlObj.searchQuery[typeProp] : "") || parseFileType(name2),
+              [urlProp]: url,
+              [sizeProp]: XEUtils.toNumber(urlObj ? urlObj.searchQuery[sizeProp] : 0) || 0,
+              [keyField]: getUniqueKey()
+            };
+          }
+          const name = item[nameProp] || "";
+          item[nameProp] = name;
+          item[typeProp] = item[typeProp] || parseFileType(name);
+          item[urlProp] = item[urlProp] || "";
+          item[sizeProp] = item[sizeProp] || 0;
+          item[keyField] = item[keyField] || getUniqueKey();
+          return item;
+        }) : [];
+        reactData.fileList = formReadonly || multiple ? fileList : fileList.slice(0, 1);
+      };
+      const parseFileName = (url) => {
+        return decodeURIComponent(`${url || ""}`).split("/").pop() || "";
+      };
+      const parseFileType = (name) => {
+        const index = name.lastIndexOf(".");
+        if (index > 0) {
+          return name.substring(index + 1).toLowerCase();
+        }
+        return "";
+      };
+      const dispatchEvent = (type, params, evnt) => {
+        emit(type, createEvent(evnt, { $upload: $xeUpload }, params));
+      };
+      const emitModel = (value) => {
+        emit("update:modelValue", value);
+      };
+      const handleModel = (vals) => {
+        const { singleMode, urlMode, urlArgs } = props;
+        const urlProp = computeUrlProp.value;
+        const nameProp = computeNameProp.value;
+        let restList = vals ? vals.slice(0) : [];
+        if (urlMode) {
+          restList = restList.map((item) => {
+            const url = item[urlProp];
+            if (url && urlArgs) {
+              const urlObj = XEUtils.parseUrl(url);
+              if (!urlObj.searchQuery[nameProp]) {
+                if (url.indexOf("blob:") === -1) {
+                  return `${url}${url.indexOf("?") === -1 ? "?" : "&"}${nameProp}=${encodeURIComponent(item[nameProp] || "")}`;
+                }
               }
             }
-          }
-          return url;
-        });
-      }
-      const value = singleMode ? restList[0] || null : restList;
-      emitModel(value);
-      return value;
-    };
-    const handleChangeEvent = (evnt, vals) => {
-      const value = handleModel(vals);
-      dispatchEvent("change", { value }, evnt);
-      return value;
-    };
-    const getThumbnailFileUrl = (item) => {
-      const getThumbnailUrlFn = props.getThumbnailUrlMethod || getConfig().upload.getThumbnailUrlMethod;
-      if (getThumbnailUrlFn) {
-        return getThumbnailUrlFn({
-          $upload: $xeUpload,
-          option: item
-        });
-      }
-      return getFileUrl(item);
-    };
-    const getFileUrl = (item) => {
-      const getUrlFn = props.getUrlMethod || getConfig().upload.getUrlMethod;
-      const urlProp = computeUrlProp.value;
-      return getUrlFn ? getUrlFn({
-        $upload: $xeUpload,
-        option: item
-      }) : item[urlProp];
-    };
-    const handleDefaultFilePreview = (item) => {
-      const { imageTypes, showDownloadButton } = props;
-      const typeProp = computeTypeProp.value;
-      const previewImageOpts = computePreviewImageOpts.value;
-      const beforeDownloadFn = props.beforeDownloadMethod || getConfig().upload.beforeDownloadMethod;
-      const { imagePreviewTypes } = internalData;
-      if (imagePreviewTypes.concat(imageTypes || []).some((type) => `${type}`.toLowerCase() === `${item[typeProp]}`.toLowerCase())) {
-        if (VxeUI.previewImage) {
-          VxeUI.previewImage({
-            ...previewImageOpts,
-            urlList: [getFileUrl(item)],
-            showDownloadButton,
-            beforeDownloadMethod: beforeDownloadFn ? () => {
-              return beforeDownloadFn({
-                $upload: $xeUpload,
-                option: item
-              });
-            } : void 0
+            return url;
           });
         }
-      }
-    };
-    const handlePreviewFileEvent = (evnt, item) => {
-      const previewFn = props.previewMethod || getConfig().upload.previewMethod;
-      if (props.showPreview) {
-        if (previewFn) {
-          previewFn({
+        const value = singleMode ? restList[0] || null : restList;
+        emitModel(value);
+        return value;
+      };
+      const handleChangeEvent = (evnt, vals) => {
+        const value = handleModel(vals);
+        dispatchEvent("change", { value }, evnt);
+        return value;
+      };
+      const getThumbnailFileUrl = (item) => {
+        const getThumbnailUrlFn = props.getThumbnailUrlMethod || getConfig().upload.getThumbnailUrlMethod;
+        if (getThumbnailUrlFn) {
+          return getThumbnailUrlFn({
             $upload: $xeUpload,
             option: item
           });
-        } else {
-          handleDefaultFilePreview(item);
         }
-      }
-    };
-    const handlePreviewImageEvent = (evnt, item, index) => {
-      const { showDownloadButton } = props;
-      const { fileList } = reactData;
-      const previewImageOpts = computePreviewImageOpts.value;
-      const previewFn = props.previewMethod || getConfig().upload.previewMethod;
-      const beforeDownloadFn = props.beforeDownloadMethod || getConfig().upload.beforeDownloadMethod;
-      if (props.showPreview) {
-        if (previewFn) {
-          previewFn({
-            $upload: $xeUpload,
-            option: item
-          });
-        } else if (VxeUI.previewImage) {
-          VxeUI.previewImage({
-            ...previewImageOpts,
-            urlList: fileList.map((item2) => getFileUrl(item2)),
-            activeIndex: index,
-            showDownloadButton,
-            beforeDownloadMethod: beforeDownloadFn ? ({ index: index2 }) => {
-              return beforeDownloadFn({
-                $upload: $xeUpload,
-                option: fileList[index2]
-              });
-            } : void 0
-          });
+        return getFileUrl(item);
+      };
+      const getFileUrl = (item) => {
+        const getUrlFn = props.getUrlMethod || getConfig().upload.getUrlMethod;
+        const urlProp = computeUrlProp.value;
+        return getUrlFn ? getUrlFn({
+          $upload: $xeUpload,
+          option: item
+        }) : item[urlProp];
+      };
+      const handleDefaultFilePreview = (item) => {
+        const { imageTypes, showDownloadButton } = props;
+        const typeProp = computeTypeProp.value;
+        const previewImageOpts = computePreviewImageOpts.value;
+        const beforeDownloadFn = props.beforeDownloadMethod || getConfig().upload.beforeDownloadMethod;
+        const { imagePreviewTypes } = internalData;
+        if (imagePreviewTypes.concat(imageTypes || []).some((type) => `${type}`.toLowerCase() === `${item[typeProp]}`.toLowerCase())) {
+          if (VxeUI.previewImage) {
+            VxeUI.previewImage({
+              ...previewImageOpts,
+              urlList: [getFileUrl(item)],
+              showDownloadButton,
+              beforeDownloadMethod: beforeDownloadFn ? () => {
+                return beforeDownloadFn({
+                  $upload: $xeUpload,
+                  option: item
+                });
+              } : void 0
+            });
+          }
         }
-      }
-    };
-    const handleUploadResult = (item, file) => {
-      const { showErrorStatus } = props;
-      const fileKey = getFieldKey(item);
-      const uploadFn = props.uploadMethod || getConfig().upload.uploadMethod;
-      if (uploadFn) {
-        dispatchEvent("upload-start", { option: item }, null);
-        return Promise.resolve(
-          uploadFn({
-            $upload: $xeUpload,
-            file,
-            option: item,
-            updateProgress(percentNum) {
-              const { fileCacheMaps } = reactData;
-              const cacheItem = fileCacheMaps[getFieldKey(item)];
-              if (cacheItem) {
-                cacheItem.percent = Math.max(0, Math.min(99, XEUtils.toNumber(percentNum)));
-              }
-            }
-          })
-        ).then((res) => {
-          const { fileCacheMaps } = reactData;
-          const cacheItem = fileCacheMaps[fileKey];
-          if (cacheItem) {
-            cacheItem.percent = 100;
-            cacheItem.status = "success";
-            cacheItem.response = res;
+      };
+      const handlePreviewFileEvent = (evnt, item) => {
+        const previewFn = props.previewMethod || getConfig().upload.previewMethod;
+        if (props.showPreview) {
+          if (previewFn) {
+            previewFn({
+              $upload: $xeUpload,
+              option: item
+            });
+          } else {
+            handleDefaultFilePreview(item);
           }
-          Object.assign(item, res);
-          handleModel(reactData.fileList);
-          dispatchEvent("upload-success", { option: item, data: res }, null);
-        }).catch((res) => {
-          const { fileCacheMaps } = reactData;
-          const cacheItem = fileCacheMaps[fileKey];
-          if (cacheItem) {
-            cacheItem.status = "error";
-            cacheItem.response = res;
+        }
+      };
+      const handlePreviewImageEvent = (evnt, item, index) => {
+        const { showDownloadButton } = props;
+        const { fileList } = reactData;
+        const previewImageOpts = computePreviewImageOpts.value;
+        const previewFn = props.previewMethod || getConfig().upload.previewMethod;
+        const beforeDownloadFn = props.beforeDownloadMethod || getConfig().upload.beforeDownloadMethod;
+        if (props.showPreview) {
+          if (previewFn) {
+            previewFn({
+              $upload: $xeUpload,
+              option: item
+            });
+          } else if (VxeUI.previewImage) {
+            VxeUI.previewImage({
+              ...previewImageOpts,
+              urlList: fileList.map((item2) => getFileUrl(item2)),
+              activeIndex: index,
+              showDownloadButton,
+              beforeDownloadMethod: beforeDownloadFn ? ({ index: index2 }) => {
+                return beforeDownloadFn({
+                  $upload: $xeUpload,
+                  option: fileList[index2]
+                });
+              } : void 0
+            });
           }
-          if (showErrorStatus) {
+        }
+      };
+      const handleUploadResult = (item, file) => {
+        const { showErrorStatus } = props;
+        const fileKey = getFieldKey(item);
+        const uploadFn = props.uploadMethod || getConfig().upload.uploadMethod;
+        if (uploadFn) {
+          dispatchEvent("upload-start", { option: item }, null);
+          return Promise.resolve(
+            uploadFn({
+              $upload: $xeUpload,
+              file,
+              option: item,
+              updateProgress(percentNum) {
+                const { fileCacheMaps } = reactData;
+                const cacheItem = fileCacheMaps[getFieldKey(item)];
+                if (cacheItem) {
+                  cacheItem.percent = Math.max(0, Math.min(99, XEUtils.toNumber(percentNum)));
+                }
+              }
+            })
+          ).then((res) => {
+            const { fileCacheMaps } = reactData;
+            const cacheItem = fileCacheMaps[fileKey];
+            if (cacheItem) {
+              cacheItem.percent = 100;
+              cacheItem.status = "success";
+              cacheItem.response = res;
+            }
             Object.assign(item, res);
-          } else {
-            reactData.fileList = reactData.fileList.filter((obj) => getFieldKey(obj) !== fileKey);
-            delete fileCacheMaps[fileKey];
-          }
-          handleModel(reactData.fileList);
-          dispatchEvent("upload-error", { option: item, data: res }, null);
-        }).finally(() => {
+            handleModel(reactData.fileList);
+            dispatchEvent("upload-success", { option: item, data: res }, null);
+          }).catch((res) => {
+            const { fileCacheMaps } = reactData;
+            const cacheItem = fileCacheMaps[fileKey];
+            if (cacheItem) {
+              cacheItem.status = "error";
+              cacheItem.response = res;
+            }
+            if (showErrorStatus) {
+              Object.assign(item, res);
+            } else {
+              reactData.fileList = reactData.fileList.filter((obj) => getFieldKey(obj) !== fileKey);
+              delete fileCacheMaps[fileKey];
+            }
+            handleModel(reactData.fileList);
+            dispatchEvent("upload-error", { option: item, data: res }, null);
+          }).finally(() => {
+            const { fileCacheMaps } = reactData;
+            const cacheItem = fileCacheMaps[fileKey];
+            if (cacheItem) {
+              cacheItem.loading = false;
+            }
+            const result = {
+              option: item,
+              status: cacheItem ? cacheItem.status : null,
+              response: cacheItem ? cacheItem.response : null
+            };
+            dispatchEvent("upload-end", { option: item, result }, null);
+          });
+        } else {
           const { fileCacheMaps } = reactData;
           const cacheItem = fileCacheMaps[fileKey];
           if (cacheItem) {
             cacheItem.loading = false;
           }
-          const result = {
-            option: item,
-            status: cacheItem ? cacheItem.status : null,
-            response: cacheItem ? cacheItem.response : null
-          };
-          dispatchEvent("upload-end", { option: item, result }, null);
-        });
-      } else {
+        }
+        return Promise.resolve();
+      };
+      const handleReUploadEvent = (evnt, item) => {
+        const { uploadMethod, urlMode } = props;
         const { fileCacheMaps } = reactData;
+        const fileKey = getFieldKey(item);
         const cacheItem = fileCacheMaps[fileKey];
-        if (cacheItem) {
-          cacheItem.loading = false;
-        }
-      }
-      return Promise.resolve();
-    };
-    const handleReUploadEvent = (evnt, item) => {
-      const { uploadMethod, urlMode } = props;
-      const { fileCacheMaps } = reactData;
-      const fileKey = getFieldKey(item);
-      const cacheItem = fileCacheMaps[fileKey];
-      const uploadFn = uploadMethod || getConfig().upload.uploadMethod;
-      if (uploadFn && cacheItem) {
-        const file = cacheItem.file;
-        cacheItem.loading = true;
-        cacheItem.status = "pending";
-        cacheItem.percent = 0;
-        handleUploadResult(item, file).then(() => {
-          if (urlMode) {
-            handleChangeEvent(evnt, reactData.fileList);
-          }
-        });
-      }
-    };
-    const handleUploadFile = (files, evnt) => {
-      const { multiple, showLimitSize, limitSizeText, showLimitCount, limitCountText, autoSubmit } = props;
-      const { fileList } = reactData;
-      const beforeSelectFn = props.beforeSelectMethod || getConfig().upload.beforeSelectMethod;
-      const uploadFn = props.uploadMethod || getConfig().upload.uploadMethod;
-      const keyField = computeKeyField.value;
-      const nameProp = computeNameProp.value;
-      const typeProp = computeTypeProp.value;
-      const urlProp = computeUrlProp.value;
-      const sizeProp = computeSizeProp.value;
-      const limitMaxSize = computeLimitMaxSize.value;
-      const limitMaxCount = computeLimitMaxCount.value;
-      const limitSizeUnit = computeLimitSizeUnit.value;
-      let selectFiles = files;
-      if (multiple && limitMaxCount) {
-        if (showLimitCount && fileList.length >= limitMaxCount) {
-          if (VxeUI.modal) {
-            VxeUI.modal.notification({
-              title: getI18n("vxe.modal.errTitle"),
-              status: "error",
-              content: limitCountText ? `${XEUtils.isFunction(limitCountText) ? limitCountText({ maxCount: limitMaxCount }) : limitCountText}` : getI18n("vxe.upload.overCountErr", [limitMaxCount])
-            });
-          }
-          return;
-        }
-        const overNum = selectFiles.length - (limitMaxCount - fileList.length);
-        if (showLimitCount && overNum > 0) {
-          const overExtraList = selectFiles.slice(limitMaxCount - fileList.length);
-          if (limitCountText) {
-            VxeUI.modal.notification({
-              title: getI18n("vxe.modal.errTitle"),
-              status: "error",
-              content: `${XEUtils.isFunction(limitCountText) ? limitCountText({ maxCount: limitMaxCount }) : limitCountText}`
-            });
-          } else if (VxeUI.modal) {
-            VxeUI.modal.notification({
-              title: getI18n("vxe.modal.errTitle"),
-              status: "error",
-              width: null,
-              slots: {
-                default() {
-                  return h(
-                    "div",
-                    {
-                      class: "vxe-upload--file-message-over-error"
-                    },
-                    [
-                      h("div", {}, getI18n("vxe.upload.overCountExtraErr", [limitMaxCount, overNum])),
-                      h(
-                        "div",
-                        {
-                          class: "vxe-upload--file-message-over-extra"
-                        },
-                        overExtraList.map((file, index) => {
-                          return h(
-                            "div",
-                            {
-                              key: index,
-                              class: "vxe-upload--file-message-over-extra-item"
-                            },
-                            file.name
-                          );
-                        })
-                      )
-                    ]
-                  );
-                }
-              }
-            });
-          }
+        const uploadFn = uploadMethod || getConfig().upload.uploadMethod;
+        if (uploadFn && cacheItem) {
+          const file = cacheItem.file;
+          cacheItem.loading = true;
+          cacheItem.status = "pending";
+          cacheItem.percent = 0;
+          handleUploadResult(item, file).then(() => {
+            if (urlMode) {
+              handleChangeEvent(evnt, reactData.fileList);
+            }
+          });
         }
-        selectFiles = selectFiles.slice(0, limitMaxCount - fileList.length);
-      }
-      if (showLimitSize && limitMaxSize) {
-        for (let i = 0; i < files.length; i++) {
-          const file = files[0];
-          if (file.size > limitMaxSize) {
+      };
+      const handleUploadFile = (files, evnt) => {
+        const { multiple, showLimitSize, limitSizeText, showLimitCount, limitCountText, autoSubmit } = props;
+        const { fileList } = reactData;
+        const beforeSelectFn = props.beforeSelectMethod || getConfig().upload.beforeSelectMethod;
+        const uploadFn = props.uploadMethod || getConfig().upload.uploadMethod;
+        const keyField = computeKeyField.value;
+        const nameProp = computeNameProp.value;
+        const typeProp = computeTypeProp.value;
+        const urlProp = computeUrlProp.value;
+        const sizeProp = computeSizeProp.value;
+        const limitMaxSize = computeLimitMaxSize.value;
+        const limitMaxCount = computeLimitMaxCount.value;
+        const limitSizeUnit = computeLimitSizeUnit.value;
+        let selectFiles = files;
+        if (multiple && limitMaxCount) {
+          if (showLimitCount && fileList.length >= limitMaxCount) {
             if (VxeUI.modal) {
               VxeUI.modal.notification({
                 title: getI18n("vxe.modal.errTitle"),
                 status: "error",
-                content: limitSizeText ? `${XEUtils.isFunction(limitSizeText) ? limitSizeText({ maxSize: limitMaxSize }) : limitSizeText}` : getI18n("vxe.upload.overSizeErr", [limitSizeUnit])
+                content: limitCountText ? `${XEUtils.isFunction(limitCountText) ? limitCountText({ maxCount: limitMaxCount }) : limitCountText}` : getI18n("vxe.upload.overCountErr", [limitMaxCount])
               });
             }
             return;
           }
+          const overNum = selectFiles.length - (limitMaxCount - fileList.length);
+          if (showLimitCount && overNum > 0) {
+            const overExtraList = selectFiles.slice(limitMaxCount - fileList.length);
+            if (limitCountText) {
+              VxeUI.modal.notification({
+                title: getI18n("vxe.modal.errTitle"),
+                status: "error",
+                content: `${XEUtils.isFunction(limitCountText) ? limitCountText({ maxCount: limitMaxCount }) : limitCountText}`
+              });
+            } else if (VxeUI.modal) {
+              VxeUI.modal.notification({
+                title: getI18n("vxe.modal.errTitle"),
+                status: "error",
+                width: null,
+                slots: {
+                  default() {
+                    return h(
+                      "div",
+                      {
+                        class: "vxe-upload--file-message-over-error"
+                      },
+                      [
+                        h("div", {}, getI18n("vxe.upload.overCountExtraErr", [limitMaxCount, overNum])),
+                        h(
+                          "div",
+                          {
+                            class: "vxe-upload--file-message-over-extra"
+                          },
+                          overExtraList.map((file, index) => {
+                            return h(
+                              "div",
+                              {
+                                key: index,
+                                class: "vxe-upload--file-message-over-extra-item"
+                              },
+                              file.name
+                            );
+                          })
+                        )
+                      ]
+                    );
+                  }
+                }
+              });
+            }
+          }
+          selectFiles = selectFiles.slice(0, limitMaxCount - fileList.length);
         }
-      }
-      dispatchEvent("upload-queue-start", { files: selectFiles }, evnt);
-      const cacheMaps = Object.assign({}, reactData.fileCacheMaps);
-      const uploadFileList = multiple ? fileList : [];
-      const newFileList = [];
-      const uploadPromiseRests = [];
-      selectFiles.forEach((file) => {
-        const { name } = file;
-        const fileKey = getUniqueKey();
-        const fileObj = {
-          [nameProp]: name,
-          [typeProp]: parseFileType(name),
-          [sizeProp]: file.size,
-          [urlProp]: URL.createObjectURL(file),
-          [keyField]: fileKey
-        };
-        if (uploadFn) {
-          cacheMaps[fileKey] = {
-            file,
-            loading: !!autoSubmit,
-            status: "pending",
-            percent: 0,
-            response: null
-          };
-        }
-        const item = reactive(fileObj);
-        if (!beforeSelectFn || beforeSelectFn({ $upload: $xeUpload, file })) {
-          if (uploadFn && autoSubmit) {
-            uploadPromiseRests.push(handleUploadResult(item, file));
+        if (showLimitSize && limitMaxSize) {
+          for (let i = 0; i < files.length; i++) {
+            const file = files[0];
+            if (file.size > limitMaxSize) {
+              if (VxeUI.modal) {
+                VxeUI.modal.notification({
+                  title: getI18n("vxe.modal.errTitle"),
+                  status: "error",
+                  content: limitSizeText ? `${XEUtils.isFunction(limitSizeText) ? limitSizeText({ maxSize: limitMaxSize }) : limitSizeText}` : getI18n("vxe.upload.overSizeErr", [limitSizeUnit])
+                });
+              }
+              return;
+            }
           }
-          newFileList.push(item);
-          uploadFileList.push(item);
         }
-      });
-      reactData.fileList = uploadFileList;
-      reactData.fileCacheMaps = cacheMaps;
-      uploadFileList.forEach((item) => {
-        dispatchEvent("add", { option: item }, evnt);
-      });
-      Promise.all(uploadPromiseRests).then(() => {
-        const { fileCacheMaps } = reactData;
-        const restFileList = reactData.fileList;
-        const uploadResults = newFileList.map((option) => {
-          const fileKey = getFieldKey(option);
-          const cacheItem = fileCacheMaps[fileKey];
-          return {
-            option,
-            status: cacheItem ? cacheItem.status : null,
-            response: cacheItem ? cacheItem.response : null
+        dispatchEvent("upload-queue-start", { files: selectFiles }, evnt);
+        const cacheMaps = Object.assign({}, reactData.fileCacheMaps);
+        const uploadFileList = multiple ? fileList : [];
+        const newFileList = [];
+        const uploadPromiseRests = [];
+        selectFiles.forEach((file) => {
+          const { name } = file;
+          const fileKey = getUniqueKey();
+          const fileObj = {
+            [nameProp]: name,
+            [typeProp]: parseFileType(name),
+            [sizeProp]: file.size,
+            [urlProp]: URL.createObjectURL(file),
+            [keyField]: fileKey
           };
+          if (uploadFn) {
+            cacheMaps[fileKey] = {
+              file,
+              loading: !!autoSubmit,
+              status: "pending",
+              percent: 0,
+              response: null
+            };
+          }
+          const item = reactive(fileObj);
+          if (!beforeSelectFn || beforeSelectFn({ $upload: $xeUpload, file })) {
+            if (uploadFn && autoSubmit) {
+              uploadPromiseRests.push(handleUploadResult(item, file));
+            }
+            newFileList.push(item);
+            uploadFileList.push(item);
+          }
         });
-        const value = handleChangeEvent(evnt, restFileList);
-        dispatchEvent("upload-queue-end", { value, options: restFileList, results: uploadResults, files: selectFiles }, evnt);
-        if ($xeForm && formItemInfo) {
-          $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, value);
+        reactData.fileList = uploadFileList;
+        reactData.fileCacheMaps = cacheMaps;
+        uploadFileList.forEach((item) => {
+          dispatchEvent("add", { option: item }, evnt);
+        });
+        Promise.all(uploadPromiseRests).then(() => {
+          const { fileCacheMaps } = reactData;
+          const restFileList = reactData.fileList;
+          const uploadResults = newFileList.map((option) => {
+            const fileKey = getFieldKey(option);
+            const cacheItem = fileCacheMaps[fileKey];
+            return {
+              option,
+              status: cacheItem ? cacheItem.status : null,
+              response: cacheItem ? cacheItem.response : null
+            };
+          });
+          const value = handleChangeEvent(evnt, restFileList);
+          dispatchEvent("upload-queue-end", { value, options: restFileList, results: uploadResults, files: selectFiles }, evnt);
+          if ($xeForm && formItemInfo) {
+            $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, value);
+          }
+        });
+      };
+      const handleChoose = (evnt) => {
+        const { multiple, imageTypes, fileTypes } = props;
+        const isDisabled = computeIsDisabled.value;
+        const isImage = computeIsImage.value;
+        if (isDisabled) {
+          return Promise.resolve({
+            status: false,
+            files: [],
+            file: null
+          });
         }
-      });
-    };
-    const handleChoose = (evnt) => {
-      const { multiple, imageTypes, fileTypes } = props;
-      const isDisabled = computeIsDisabled.value;
-      const isImage = computeIsImage.value;
-      if (isDisabled) {
-        return Promise.resolve({
-          status: false,
-          files: [],
-          file: null
+        return readLocalFile({
+          multiple,
+          types: isImage ? imageTypes : fileTypes
+        }).then((params) => {
+          handleUploadFile(params.files, evnt);
+          return params;
         });
-      }
-      return readLocalFile({
-        multiple,
-        types: isImage ? imageTypes : fileTypes
-      }).then((params) => {
-        handleUploadFile(params.files, evnt);
-        return params;
-      });
-    };
-    const clickEvent = (evnt) => {
-      handleChoose(evnt).catch(() => {
-      });
-    };
-    const handleRemoveEvent = (evnt, item, index) => {
-      const { fileList } = reactData;
-      fileList.splice(index, 1);
-      handleChangeEvent(evnt, fileList);
-      if ($xeForm && formItemInfo) {
-        $xeForm.triggerItemEvent(evnt || { type: "remove" }, formItemInfo.itemConfig.field, fileList);
-      }
-      if (evnt) {
-        dispatchEvent("remove", { option: item }, evnt);
-      }
-    };
-    const removeFileEvent = (evnt, item, index) => {
-      const beforeRemoveFn = props.beforeRemoveMethod || getConfig().upload.beforeRemoveMethod;
-      const removeFn = props.removeMethod || getConfig().upload.removeMethod;
-      return Promise.resolve(
-        beforeRemoveFn ? beforeRemoveFn({
-          $upload: $xeUpload,
-          option: item
-        }) : true
-      ).then((status) => {
-        if (status) {
-          if (removeFn) {
-            Promise.resolve(
-              removeFn({
-                $upload: $xeUpload,
-                option: item
-              })
-            ).then(() => {
+      };
+      const clickEvent = (evnt) => {
+        handleChoose(evnt).catch(() => {
+        });
+      };
+      const handleRemoveEvent = (evnt, item, index) => {
+        const { fileList } = reactData;
+        fileList.splice(index, 1);
+        handleChangeEvent(evnt, fileList);
+        if ($xeForm && formItemInfo) {
+          $xeForm.triggerItemEvent(evnt || { type: "remove" }, formItemInfo.itemConfig.field, fileList);
+        }
+        if (evnt) {
+          dispatchEvent("remove", { option: item }, evnt);
+        }
+      };
+      const removeFileEvent = (evnt, item, index) => {
+        const beforeRemoveFn = props.beforeRemoveMethod || getConfig().upload.beforeRemoveMethod;
+        const removeFn = props.removeMethod || getConfig().upload.removeMethod;
+        return Promise.resolve(
+          beforeRemoveFn ? beforeRemoveFn({
+            $upload: $xeUpload,
+            option: item
+          }) : true
+        ).then((status) => {
+          if (status) {
+            if (removeFn) {
+              Promise.resolve(
+                removeFn({
+                  $upload: $xeUpload,
+                  option: item
+                })
+              ).then(() => {
+                handleRemoveEvent(evnt, item, index);
+              }).catch((e) => e);
+            } else {
               handleRemoveEvent(evnt, item, index);
-            }).catch((e) => e);
+            }
           } else {
-            handleRemoveEvent(evnt, item, index);
+            if (evnt) {
+              dispatchEvent("remove-fail", { option: item }, evnt);
+            }
           }
+          return status;
+        });
+      };
+      const handleDownloadEvent = (evnt, item) => {
+        dispatchEvent("download", { option: item }, evnt);
+      };
+      const downloadFileEvent = (evnt, item) => {
+        const beforeDownloadFn = props.beforeDownloadMethod || getConfig().upload.beforeDownloadMethod;
+        const downloadFn = props.downloadMethod || getConfig().upload.downloadMethod;
+        Promise.resolve(
+          beforeDownloadFn ? beforeDownloadFn({
+            $upload: $xeUpload,
+            option: item
+          }) : true
+        ).then((status) => {
+          if (status) {
+            if (downloadFn) {
+              Promise.resolve(
+                downloadFn({
+                  $upload: $xeUpload,
+                  option: item
+                })
+              ).then(() => {
+                handleDownloadEvent(evnt, item);
+              }).catch((e) => e);
+            } else {
+              handleDownloadEvent(evnt, item);
+            }
+          } else {
+            dispatchEvent("download-fail", { option: item }, evnt);
+          }
+        });
+      };
+      const handleUploadDragleaveEvent = (evnt) => {
+        const targetElem = evnt.currentTarget;
+        const { clientX, clientY } = evnt;
+        if (targetElem) {
+          const { x: targetX, y: targetY, height: targetHeight, width: targetWidth } = targetElem.getBoundingClientRect();
+          if (clientX < targetX || clientX > targetX + targetWidth || clientY < targetY || clientY > targetY + targetHeight) {
+            reactData.isDragUploadStatus = false;
+          }
+        }
+      };
+      const handleUploadDragoverEvent = (evnt) => {
+        const dataTransfer = evnt.dataTransfer;
+        if (dataTransfer) {
+          const { items } = dataTransfer;
+          if (items && items.length) {
+            evnt.preventDefault();
+            reactData.isDragUploadStatus = true;
+          }
+        }
+      };
+      const uploadTransferFileEvent = (evnt, files) => {
+        const { imageTypes, fileTypes } = props;
+        const { imagePreviewTypes } = internalData;
+        const isImage = computeIsImage.value;
+        if (isImage) {
+          const pasteImgTypes = imagePreviewTypes.concat(imageTypes && imageTypes.length ? imageTypes : []);
+          files = files.filter((file) => {
+            const fileType = `${file.type.split("/")[1] || ""}`.toLowerCase();
+            if (pasteImgTypes.some((type) => `${type}`.toLowerCase() === fileType)) {
+              return true;
+            }
+            return false;
+          });
         } else {
+          if (fileTypes && fileTypes.length) {
+            const errTypes = [];
+            files.forEach((file) => {
+              const fileType = parseFileType(file.name);
+              if (!fileTypes.some((type) => `${type}`.toLowerCase() === fileType)) {
+                errTypes.push(fileType);
+              }
+            });
+            if (errTypes.length) {
+              if (VxeUI.modal) {
+                VxeUI.modal.message({
+                  content: getI18n("vxe.error.notType", [errTypes.join(", ")]),
+                  status: "error"
+                });
+              }
+              return;
+            }
+          }
+        }
+        if (!files.length) {
+          if (VxeUI.modal) {
+            VxeUI.modal.notification({
+              title: getI18n("vxe.modal.errTitle"),
+              status: "error",
+              content: getI18n("vxe.upload.uploadTypeErr")
+            });
+          }
+          return;
+        }
+        handleUploadFile(files, evnt);
+      };
+      const handleUploadDropEvent = (evnt) => {
+        const dataTransfer = evnt.dataTransfer;
+        if (dataTransfer) {
+          const { items } = dataTransfer;
+          if (items && items.length) {
+            evnt.preventDefault();
+            const files = handleTransferFiles(items);
+            if (files.length) {
+              uploadTransferFileEvent(evnt, files);
+            }
+          }
+        }
+        reactData.isDragUploadStatus = false;
+      };
+      const handleTransferFiles = (items) => {
+        const files = [];
+        XEUtils.arrayEach(items, (item) => {
+          const file = item.getAsFile();
+          if (file) {
+            files.push(file);
+          }
+        });
+        return files;
+      };
+      const handleMoreEvent = (evntParams) => {
+        const formReadonly = computeFormReadonly.value;
+        const isImage = computeIsImage.value;
+        const evnt = evntParams.$event;
+        if (VxeUI.modal) {
+          VxeUI.modal.open({
+            id: internalData.moreId,
+            title: formReadonly ? getI18n("vxe.upload.morePopup.readTitle") : getI18n(`vxe.upload.morePopup.${isImage ? "imageTitle" : "fileTitle"}`),
+            width: 660,
+            height: 500,
+            escClosable: true,
+            showMaximize: true,
+            resize: true,
+            maskClosable: true,
+            slots: {
+              default() {
+                const { showErrorStatus, dragToUpload, dragSort, dragPlaceholder } = props;
+                const { isActivated, isDragMove, isDragUploadStatus, dragIndex } = reactData;
+                const { fileList } = reactData;
+                const isDisabled = computeIsDisabled.value;
+                const moreContSlot = slots.moreContent || slots["more-content"];
+                const ons = {};
+                if (dragToUpload && dragIndex === -1) {
+                  ons.onDragover = handleUploadDragoverEvent;
+                  ons.onDragleave = handleUploadDragleaveEvent;
+                  ons.onDrop = handleUploadDropEvent;
+                }
+                return h(
+                  "div",
+                  {
+                    ref: refPopupElem,
+                    class: [
+                      "vxe-upload--more-popup",
+                      {
+                        "is--readonly": formReadonly,
+                        "is--disabled": isDisabled,
+                        "is--active": isActivated,
+                        "show--error": showErrorStatus,
+                        "is--drag": isDragUploadStatus
+                      }
+                    ],
+                    ...ons
+                  },
+                  moreContSlot ? getSlotVNs(moreContSlot({ options: fileList })) : [
+                    isImage ? dragSort ? h(
+                      TransitionGroup,
+                      {
+                        name: `vxe-upload--drag-list${isDragMove ? "" : "-disabled"}`,
+                        tag: "div",
+                        class: "vxe-upload--image-more-list"
+                      },
+                      {
+                        default: () => renderImageItemList(fileList, true).concat(renderImageAction(true))
+                      }
+                    ) : h(
+                      "div",
+                      {
+                        class: "vxe-upload--image-more-list"
+                      },
+                      renderImageItemList(fileList, true).concat(renderImageAction(true))
+                    ) : h(
+                      "div",
+                      {
+                        class: "vxe-upload--file-more-list"
+                      },
+                      [
+                        renderFileAction(true),
+                        dragSort ? h(
+                          TransitionGroup,
+                          {
+                            name: `vxe-upload--drag-list${isDragMove ? "" : "-disabled"}`,
+                            tag: "div",
+                            class: "vxe-upload--file-list"
+                          },
+                          {
+                            default: () => renderFileItemList(fileList, false)
+                          }
+                        ) : h(
+                          "div",
+                          {
+                            class: "vxe-upload--file-list"
+                          },
+                          renderFileItemList(fileList, true)
+                        )
+                      ]
+                    ),
+                    dragSort ? h("div", {
+                      ref: refModalDragLineElem,
+                      class: "vxe-upload--drag-line"
+                    }) : renderEmptyElement($xeUpload),
+                    isDragUploadStatus ? h(
+                      "div",
+                      {
+                        class: "vxe-upload--drag-placeholder"
+                      },
+                      dragPlaceholder || getI18n("vxe.upload.dragPlaceholder")
+                    ) : renderEmptyElement($xeUpload)
+                  ]
+                );
+              }
+            },
+            onShow() {
+              reactData.showMorePopup = true;
+            },
+            onHide({ $event }) {
+              reactData.showMorePopup = false;
+              if ($event) {
+                dispatchEvent("more-visible", { visible: false }, $event);
+              }
+            }
+          });
           if (evnt) {
-            dispatchEvent("remove-fail", { option: item }, evnt);
+            dispatchEvent("more-visible", { visible: true }, evnt);
           }
         }
-        return status;
-      });
-    };
-    const handleDownloadEvent = (evnt, item) => {
-      dispatchEvent("download", { option: item }, evnt);
-    };
-    const downloadFileEvent = (evnt, item) => {
-      const beforeDownloadFn = props.beforeDownloadMethod || getConfig().upload.beforeDownloadMethod;
-      const downloadFn = props.downloadMethod || getConfig().upload.downloadMethod;
-      Promise.resolve(
-        beforeDownloadFn ? beforeDownloadFn({
-          $upload: $xeUpload,
-          option: item
-        }) : true
-      ).then((status) => {
-        if (status) {
-          if (downloadFn) {
-            Promise.resolve(
-              downloadFn({
-                $upload: $xeUpload,
-                option: item
-              })
-            ).then(() => {
-              handleDownloadEvent(evnt, item);
-            }).catch((e) => e);
-          } else {
-            handleDownloadEvent(evnt, item);
-          }
-        } else {
-          dispatchEvent("download-fail", { option: item }, evnt);
+      };
+      const showDropTip = (evnt, dragEl, dragPos) => {
+        const { showMorePopup } = reactData;
+        const el = refElem.value;
+        const popupEl = refPopupElem.value;
+        const wrapperEl = showMorePopup ? popupEl : el;
+        if (!wrapperEl) {
+          return;
+        }
+        const wrapperRect = wrapperEl.getBoundingClientRect();
+        const ddLineEl = refDragLineElem.value;
+        const mdLineEl = refModalDragLineElem.value;
+        const currDLineEl = showMorePopup ? mdLineEl : ddLineEl;
+        if (currDLineEl) {
+          const dragRect = dragEl.getBoundingClientRect();
+          currDLineEl.style.display = "block";
+          currDLineEl.style.top = `${Math.max(1, dragRect.y - wrapperRect.y)}px`;
+          currDLineEl.style.left = `${Math.max(1, dragRect.x - wrapperRect.x)}px`;
+          currDLineEl.style.height = `${dragRect.height}px`;
+          currDLineEl.style.width = `${dragRect.width - 1}px`;
+          currDLineEl.setAttribute("drag-pos", dragPos);
+        }
+      };
+      const hideDropTip = () => {
+        const ddLineEl = refDragLineElem.value;
+        const mdLineEl = refModalDragLineElem.value;
+        if (ddLineEl) {
+          ddLineEl.style.display = "";
+        }
+        if (mdLineEl) {
+          mdLineEl.style.display = "";
+        }
+      };
+      const handleDragSortDragstartEvent = (evnt) => {
+        evnt.stopPropagation();
+        if (evnt.dataTransfer) {
+          evnt.dataTransfer.setDragImage(getTpImg(), 0, 0);
+        }
+        const dragEl = evnt.currentTarget;
+        const parentEl = dragEl.parentElement;
+        const dragIndex = XEUtils.findIndexOf(Array.from(parentEl.children), (item) => dragEl === item);
+        reactData.isDragMove = true;
+        reactData.dragIndex = dragIndex;
+        setTimeout(() => {
+          reactData.isDragMove = false;
+        }, 500);
+      };
+      const handleDragSortDragoverEvent = (evnt) => {
+        evnt.stopPropagation();
+        evnt.preventDefault();
+        const { dragIndex } = reactData;
+        if (dragIndex === -1) {
+          return;
+        }
+        const isImage = computeIsImage.value;
+        const dragEl = evnt.currentTarget;
+        const parentEl = dragEl.parentElement;
+        const currIndex = XEUtils.findIndexOf(Array.from(parentEl.children), (item) => dragEl === item);
+        let dragPos = "";
+        if (isImage) {
+          const offsetX = evnt.clientX - dragEl.getBoundingClientRect().x;
+          dragPos = offsetX < dragEl.clientWidth / 2 ? "left" : "right";
+        } else {
+          const offsetY = evnt.clientY - dragEl.getBoundingClientRect().y;
+          dragPos = offsetY < dragEl.clientHeight / 2 ? "top" : "bottom";
+        }
+        if (dragIndex === currIndex) {
+          showDropTip(evnt, dragEl, dragPos);
+          return;
+        }
+        showDropTip(evnt, dragEl, dragPos);
+        internalData.prevDragIndex = currIndex;
+        internalData.prevDragPos = dragPos;
+      };
+      const handleDragSortDragendEvent = (evnt) => {
+        const { fileList, dragIndex } = reactData;
+        const { prevDragIndex, prevDragPos } = internalData;
+        const oldIndex = dragIndex;
+        const targetIndex = prevDragIndex;
+        const dragOffsetIndex = prevDragPos === "bottom" || prevDragPos === "right" ? 1 : 0;
+        const oldItem = fileList[oldIndex];
+        const newItem = fileList[targetIndex];
+        if (oldItem && newItem) {
+          fileList.splice(oldIndex, 1);
+          const ptfIndex = XEUtils.findIndexOf(fileList, (item) => newItem === item);
+          const nIndex = ptfIndex + dragOffsetIndex;
+          fileList.splice(nIndex, 0, oldItem);
+          dispatchEvent(
+            "sort-dragend",
+            {
+              oldItem,
+              newItem,
+              dragPos: prevDragPos,
+              offsetIndex: dragOffsetIndex,
+              _index: {
+                newIndex: nIndex,
+                oldIndex
+              }
+            },
+            evnt
+          );
+        }
+        hideDropTip();
+        reactData.dragIndex = -1;
+      };
+      const handleItemMousedownEvent = (evnt) => {
+        if ($xeTable) {
+          evnt.stopPropagation();
         }
-      });
-    };
-    const handleUploadDragleaveEvent = (evnt) => {
-      const targetElem = evnt.currentTarget;
-      const { clientX, clientY } = evnt;
-      if (targetElem) {
-        const { x: targetX, y: targetY, height: targetHeight, width: targetWidth } = targetElem.getBoundingClientRect();
-        if (clientX < targetX || clientX > targetX + targetWidth || clientY < targetY || clientY > targetY + targetHeight) {
-          reactData.isDragUploadStatus = false;
+        reactData.isActivated = true;
+      };
+      const handleGlobalPasteEvent = (evnt) => {
+        const { pasteToUpload } = props;
+        const { isActivated } = reactData;
+        if (!isActivated || !pasteToUpload) {
+          return;
         }
-      }
-    };
-    const handleUploadDragoverEvent = (evnt) => {
-      const dataTransfer = evnt.dataTransfer;
-      if (dataTransfer) {
-        const { items } = dataTransfer;
-        if (items && items.length) {
+        const clipboardData = evnt.clipboardData || evnt.originalEvent.clipboardData;
+        if (!clipboardData) {
+          return;
+        }
+        const { items } = clipboardData;
+        if (!items) {
+          return;
+        }
+        const files = handleTransferFiles(items);
+        if (files.length) {
           evnt.preventDefault();
-          reactData.isDragUploadStatus = true;
+          uploadTransferFileEvent(evnt, files);
         }
-      }
-    };
-    const uploadTransferFileEvent = (evnt, files) => {
-      const { imageTypes, fileTypes } = props;
-      const { imagePreviewTypes } = internalData;
-      const isImage = computeIsImage.value;
-      if (isImage) {
-        const pasteImgTypes = imagePreviewTypes.concat(imageTypes && imageTypes.length ? imageTypes : []);
-        files = files.filter((file) => {
-          const fileType = `${file.type.split("/")[1] || ""}`.toLowerCase();
-          if (pasteImgTypes.some((type) => `${type}`.toLowerCase() === fileType)) {
-            return true;
+      };
+      const handleGlobalClickEvent = (evnt) => {
+        const el = refElem.value;
+        const popupEl = refPopupElem.value;
+        let isActivated = getEventTargetNode(evnt, el).flag;
+        if (!isActivated && popupEl) {
+          const parentEl = popupEl.parentElement || popupEl;
+          const modalEl = parentEl ? parentEl.parentElement : parentEl;
+          isActivated = getEventTargetNode(evnt, modalEl).flag;
+        }
+        reactData.isActivated = isActivated;
+      };
+      const handleGlobalBlurEvent = () => {
+        reactData.isActivated = false;
+      };
+      const handleClearFile = (evnt) => {
+        const { fileList } = reactData;
+        const urlProp = computeUrlProp.value;
+        const rest = [];
+        XEUtils.lastEach(fileList, (item, index) => {
+          rest.push(
+            removeFileEvent(evnt, item, index).then((status) => {
+              return { url: item[urlProp], status };
+            })
+          );
+        });
+        return Promise.all(rest);
+      };
+      const handleRemoveFile = (evnt, urlOrItem) => {
+        const { fileList } = reactData;
+        const urlProp = computeUrlProp.value;
+        const urls = XEUtils.isArray(urlOrItem) ? urlOrItem : [urlOrItem];
+        const rest = [];
+        urls.forEach((obj) => {
+          if (obj) {
+            const url = XEUtils.isString(obj) ? obj : obj[urlProp];
+            const index = XEUtils.findIndexOf(fileList, (fileItem) => fileItem[urlProp] === url);
+            if (index > -1) {
+              rest.push(
+                removeFileEvent(evnt, fileList[index], index).then((status) => {
+                  return { url, status };
+                })
+              );
+            }
           }
-          return false;
         });
-      } else {
-        if (fileTypes && fileTypes.length) {
-          const errTypes = [];
-          files.forEach((file) => {
-            const fileType = parseFileType(file.name);
-            if (!fileTypes.some((type) => `${type}`.toLowerCase() === fileType)) {
-              errTypes.push(fileType);
+        return Promise.all(rest);
+      };
+      const uploadMethods = {
+        dispatchEvent,
+        choose() {
+          return handleChoose(null);
+        },
+        clear() {
+          return handleClearFile(null);
+        },
+        clearByEvent(evnt) {
+          return handleClearFile(evnt);
+        },
+        getPendingFiles() {
+          const { fileList, fileCacheMaps } = reactData;
+          const pendingFiles = [];
+          fileList.forEach((item) => {
+            const fileKey = getFieldKey(item);
+            const cacheItem = fileCacheMaps[fileKey];
+            if (cacheItem && cacheItem.status === "pending") {
+              pendingFiles.push(cacheItem.file);
             }
           });
-          if (errTypes.length) {
-            if (VxeUI.modal) {
-              VxeUI.modal.message({
-                content: getI18n("vxe.error.notType", [errTypes.join(", ")]),
-                status: "error"
-              });
+          return pendingFiles;
+        },
+        submit(isFull) {
+          const { maxSimultaneousUploads } = props;
+          const msNum = XEUtils.toNumber(maxSimultaneousUploads || 1) || 1;
+          const { fileList, fileCacheMaps } = reactData;
+          const allPendingList = fileList.filter((item) => {
+            const fileKey = getFieldKey(item);
+            const cacheItem = fileCacheMaps[fileKey];
+            return cacheItem && (cacheItem.status === "pending" || isFull && cacheItem.status === "error");
+          });
+          const handleSubmit = (item) => {
+            const fileKey = getFieldKey(item);
+            const cacheItem = fileCacheMaps[fileKey];
+            if (cacheItem) {
+              const file = cacheItem.file;
+              if (file && (cacheItem.status === "pending" || isFull && cacheItem.status === "error")) {
+                cacheItem.loading = true;
+                cacheItem.percent = 0;
+                return handleUploadResult(item, file).then(handleNextSubmit);
+              }
             }
-            return;
-          }
-        }
-      }
-      if (!files.length) {
-        if (VxeUI.modal) {
-          VxeUI.modal.notification({
-            title: getI18n("vxe.modal.errTitle"),
-            status: "error",
-            content: getI18n("vxe.upload.uploadTypeErr")
+            return handleNextSubmit();
+          };
+          const handleNextSubmit = () => {
+            if (allPendingList.length) {
+              const item = allPendingList[0];
+              allPendingList.splice(0, 1);
+              return handleSubmit(item).then(handleNextSubmit);
+            }
+            return Promise.resolve();
+          };
+          return Promise.all(allPendingList.splice(0, msNum).map(handleSubmit)).then(() => {
           });
-        }
-        return;
-      }
-      handleUploadFile(files, evnt);
-    };
-    const handleUploadDropEvent = (evnt) => {
-      const dataTransfer = evnt.dataTransfer;
-      if (dataTransfer) {
-        const { items } = dataTransfer;
-        if (items && items.length) {
-          evnt.preventDefault();
-          const files = handleTransferFiles(items);
-          if (files.length) {
-            uploadTransferFileEvent(evnt, files);
+        },
+        getMoreVisible() {
+          return reactData.showMorePopup;
+        },
+        openMore() {
+          handleMoreEvent({ $event: new Event("click") });
+          return nextTick();
+        },
+        openMoreByEvent(evnt) {
+          handleMoreEvent({ $event: evnt });
+          return nextTick();
+        },
+        closeMore() {
+          if (VxeUI.modal) {
+            VxeUI.modal.close(internalData.moreId);
           }
+          return nextTick();
+        },
+        remove(urlOrItem) {
+          return handleRemoveFile(null, urlOrItem);
+        },
+        removeByEvent(evnt, urlOrItem) {
+          return handleRemoveFile(evnt, urlOrItem);
         }
-      }
-      reactData.isDragUploadStatus = false;
-    };
-    const handleTransferFiles = (items) => {
-      const files = [];
-      XEUtils.arrayEach(items, (item) => {
-        const file = item.getAsFile();
-        if (file) {
-          files.push(file);
+      };
+      const uploadPrivateMethods = {
+        removeFileEvent
+      };
+      Object.assign($xeUpload, uploadMethods, uploadPrivateMethods);
+      const renderFileItemList = (currList, isMoreView) => {
+        const { showRemoveButton, showDownloadButton, showProgress, progressText, showPreview, showErrorStatus, dragSort, autoSubmit, showSubmitButton } = props;
+        const { fileList, fileCacheMaps } = reactData;
+        const isDisabled = computeIsDisabled.value;
+        const formReadonly = computeFormReadonly.value;
+        const nameProp = computeNameProp.value;
+        const typeProp = computeTypeProp.value;
+        const optionSlot = slots.option;
+        const actionSlot = slots.action;
+        const cornerSlot = slots.corner;
+        const nameSlot = slots.name;
+        const ons = {};
+        if (dragSort && currList.length > 1) {
+          ons.onDragstart = handleDragSortDragstartEvent;
+          ons.onDragover = handleDragSortDragoverEvent;
+          ons.onDragend = handleDragSortDragendEvent;
         }
-      });
-      return files;
-    };
-    const handleMoreEvent = (evntParams) => {
-      const formReadonly = computeFormReadonly.value;
-      const isImage = computeIsImage.value;
-      const evnt = evntParams.$event;
-      if (VxeUI.modal) {
-        VxeUI.modal.open({
-          id: internalData.moreId,
-          title: formReadonly ? getI18n("vxe.upload.morePopup.readTitle") : getI18n(`vxe.upload.morePopup.${isImage ? "imageTitle" : "fileTitle"}`),
-          width: 660,
-          height: 500,
-          escClosable: true,
-          showMaximize: true,
-          resize: true,
-          maskClosable: true,
-          slots: {
-            default() {
-              const { showErrorStatus, dragToUpload, dragSort, dragPlaceholder } = props;
-              const { isActivated, isDragMove, isDragUploadStatus, dragIndex } = reactData;
-              const { fileList } = reactData;
-              const isDisabled = computeIsDisabled.value;
-              const moreContSlot = slots.moreContent || slots["more-content"];
-              const ons = {};
-              if (dragToUpload && dragIndex === -1) {
-                ons.onDragover = handleUploadDragoverEvent;
-                ons.onDragleave = handleUploadDragleaveEvent;
-                ons.onDrop = handleUploadDropEvent;
-              }
-              return h(
+        return currList.map((item, index) => {
+          const fileKey = getFieldKey(item);
+          const cacheItem = fileCacheMaps[fileKey];
+          let isLoading = false;
+          let isError = false;
+          let isPending = false;
+          const fileName = `${item[nameProp] || ""}`;
+          if (cacheItem) {
+            isLoading = cacheItem.loading;
+            isError = cacheItem.status === "error";
+            isPending = cacheItem.status === "pending";
+          }
+          return h(
+            "div",
+            {
+              key: dragSort ? fileKey : index,
+              class: [
+                "vxe-upload--file-item",
+                {
+                  "is--preview": showPreview,
+                  "is--loading": isLoading,
+                  "is--pending": isPending,
+                  "is--error": isError
+                }
+              ],
+              fileid: fileKey,
+              draggable: dragSort ? true : null,
+              ...ons
+            },
+            optionSlot ? getSlotVNs(optionSlot({ option: item, isMoreView, options: fileList })) : [
+              h(
                 "div",
                 {
-                  ref: refPopupElem,
-                  class: [
-                    "vxe-upload--more-popup",
-                    {
-                      "is--readonly": formReadonly,
-                      "is--disabled": isDisabled,
-                      "is--active": isActivated,
-                      "show--error": showErrorStatus,
-                      "is--drag": isDragUploadStatus
+                  class: "vxe-upload--file-item-icon"
+                },
+                [
+                  h("i", {
+                    class: getIcon()[`UPLOAD_FILE_TYPE_${`${item[typeProp]}`.toLocaleUpperCase()}`] || getIcon().UPLOAD_FILE_TYPE_DEFAULT
+                  })
+                ]
+              ),
+              h(
+                "div",
+                {
+                  class: "vxe-upload--file-item-name",
+                  title: fileName,
+                  onClick(evnt) {
+                    if (!isLoading && !isError) {
+                      handlePreviewFileEvent(evnt, item);
                     }
-                  ],
-                  ...ons
+                  }
                 },
-                moreContSlot ? getSlotVNs(moreContSlot({ options: fileList })) : [
-                  isImage ? dragSort ? h(
-                    TransitionGroup,
-                    {
-                      name: `vxe-upload--drag-list${isDragMove ? "" : "-disabled"}`,
-                      tag: "div",
-                      class: "vxe-upload--image-more-list"
-                    },
-                    {
-                      default: () => renderImageItemList(fileList, true).concat(renderImageAction(true))
+                nameSlot ? getSlotVNs(nameSlot({ option: item, isMoreView, options: fileList })) : fileName
+              ),
+              isLoading ? h(
+                "div",
+                {
+                  class: "vxe-upload--file-item-loading-icon"
+                },
+                [
+                  h("i", {
+                    class: getIcon().UPLOAD_LOADING
+                  })
+                ]
+              ) : renderEmptyElement($xeUpload),
+              showProgress && isLoading && cacheItem ? h(
+                "div",
+                {
+                  class: "vxe-upload--file-item-loading-text"
+                },
+                progressText ? XEUtils.toFormatString(`${XEUtils.isFunction(progressText) ? progressText({}) : progressText}`, { percent: cacheItem.percent }) : getI18n("vxe.upload.uploadProgress", [cacheItem.percent])
+              ) : renderEmptyElement($xeUpload),
+              !isLoading && (isError && showErrorStatus || isPending && showSubmitButton && !autoSubmit) ? h(
+                "div",
+                {
+                  class: "vxe-upload--file-item-rebtn"
+                },
+                [
+                  h(VxeButtonComponent, {
+                    icon: isError ? getIcon().UPLOAD_IMAGE_RE_UPLOAD : getIcon().UPLOAD_IMAGE_UPLOAD,
+                    mode: "text",
+                    status: "primary",
+                    content: isError ? getI18n("vxe.upload.reUpload") : getI18n("vxe.upload.manualUpload"),
+                    onClick(evnt) {
+                      handleReUploadEvent(evnt, item);
                     }
-                  ) : h(
+                  })
+                ]
+              ) : renderEmptyElement($xeUpload),
+              h(
+                "div",
+                {
+                  class: "vxe-upload--file-item-btn-wrapper"
+                },
+                actionSlot ? getSlotVNs(actionSlot({ option: item, isMoreView, options: fileList, readonly: formReadonly })) : [
+                  cornerSlot ? h(
                     "div",
                     {
-                      class: "vxe-upload--image-more-list"
+                      class: "vxe-upload--file-item-action"
                     },
-                    renderImageItemList(fileList, true).concat(renderImageAction(true))
-                  ) : h(
+                    getSlotVNs(cornerSlot({ option: item, isMoreView, options: fileList, readonly: formReadonly }))
+                  ) : renderEmptyElement($xeUpload),
+                  showDownloadButton && !(isLoading || isPending) ? h(
                     "div",
                     {
-                      class: "vxe-upload--file-more-list"
+                      class: "vxe-upload--file-item-download-btn",
+                      onClick(evnt) {
+                        downloadFileEvent(evnt, item);
+                      }
                     },
                     [
-                      renderFileAction(true),
-                      dragSort ? h(
-                        TransitionGroup,
-                        {
-                          name: `vxe-upload--drag-list${isDragMove ? "" : "-disabled"}`,
-                          tag: "div",
-                          class: "vxe-upload--file-list"
-                        },
-                        {
-                          default: () => renderFileItemList(fileList, false)
-                        }
-                      ) : h(
-                        "div",
-                        {
-                          class: "vxe-upload--file-list"
-                        },
-                        renderFileItemList(fileList, true)
-                      )
+                      h("i", {
+                        class: getIcon().UPLOAD_FILE_DOWNLOAD
+                      })
                     ]
-                  ),
-                  dragSort ? h("div", {
-                    ref: refModalDragLineElem,
-                    class: "vxe-upload--drag-line"
-                  }) : renderEmptyElement($xeUpload),
-                  isDragUploadStatus ? h(
+                  ) : renderEmptyElement($xeUpload),
+                  showRemoveButton && !formReadonly && !isDisabled && !isLoading ? h(
                     "div",
                     {
-                      class: "vxe-upload--drag-placeholder"
+                      class: "vxe-upload--file-item-remove-btn",
+                      onClick(evnt) {
+                        removeFileEvent(evnt, item, index);
+                      }
                     },
-                    dragPlaceholder || getI18n("vxe.upload.dragPlaceholder")
+                    [
+                      h("i", {
+                        class: getIcon().UPLOAD_FILE_REMOVE
+                      })
+                    ]
                   ) : renderEmptyElement($xeUpload)
                 ]
-              );
-            }
-          },
-          onShow() {
-            reactData.showMorePopup = true;
-          },
-          onHide({ $event }) {
-            reactData.showMorePopup = false;
-            if ($event) {
-              dispatchEvent("more-visible", { visible: false }, $event);
-            }
-          }
-        });
-        if (evnt) {
-          dispatchEvent("more-visible", { visible: true }, evnt);
-        }
-      }
-    };
-    const showDropTip = (evnt, dragEl, dragPos) => {
-      const { showMorePopup } = reactData;
-      const el = refElem.value;
-      const popupEl = refPopupElem.value;
-      const wrapperEl = showMorePopup ? popupEl : el;
-      if (!wrapperEl) {
-        return;
-      }
-      const wrapperRect = wrapperEl.getBoundingClientRect();
-      const ddLineEl = refDragLineElem.value;
-      const mdLineEl = refModalDragLineElem.value;
-      const currDLineEl = showMorePopup ? mdLineEl : ddLineEl;
-      if (currDLineEl) {
-        const dragRect = dragEl.getBoundingClientRect();
-        currDLineEl.style.display = "block";
-        currDLineEl.style.top = `${Math.max(1, dragRect.y - wrapperRect.y)}px`;
-        currDLineEl.style.left = `${Math.max(1, dragRect.x - wrapperRect.x)}px`;
-        currDLineEl.style.height = `${dragRect.height}px`;
-        currDLineEl.style.width = `${dragRect.width - 1}px`;
-        currDLineEl.setAttribute("drag-pos", dragPos);
-      }
-    };
-    const hideDropTip = () => {
-      const ddLineEl = refDragLineElem.value;
-      const mdLineEl = refModalDragLineElem.value;
-      if (ddLineEl) {
-        ddLineEl.style.display = "";
-      }
-      if (mdLineEl) {
-        mdLineEl.style.display = "";
-      }
-    };
-    const handleDragSortDragstartEvent = (evnt) => {
-      evnt.stopPropagation();
-      if (evnt.dataTransfer) {
-        evnt.dataTransfer.setDragImage(getTpImg(), 0, 0);
-      }
-      const dragEl = evnt.currentTarget;
-      const parentEl = dragEl.parentElement;
-      const dragIndex = XEUtils.findIndexOf(Array.from(parentEl.children), (item) => dragEl === item);
-      reactData.isDragMove = true;
-      reactData.dragIndex = dragIndex;
-      setTimeout(() => {
-        reactData.isDragMove = false;
-      }, 500);
-    };
-    const handleDragSortDragoverEvent = (evnt) => {
-      evnt.stopPropagation();
-      evnt.preventDefault();
-      const { dragIndex } = reactData;
-      if (dragIndex === -1) {
-        return;
-      }
-      const isImage = computeIsImage.value;
-      const dragEl = evnt.currentTarget;
-      const parentEl = dragEl.parentElement;
-      const currIndex = XEUtils.findIndexOf(Array.from(parentEl.children), (item) => dragEl === item);
-      let dragPos = "";
-      if (isImage) {
-        const offsetX = evnt.clientX - dragEl.getBoundingClientRect().x;
-        dragPos = offsetX < dragEl.clientWidth / 2 ? "left" : "right";
-      } else {
-        const offsetY = evnt.clientY - dragEl.getBoundingClientRect().y;
-        dragPos = offsetY < dragEl.clientHeight / 2 ? "top" : "bottom";
-      }
-      if (dragIndex === currIndex) {
-        showDropTip(evnt, dragEl, dragPos);
-        return;
-      }
-      showDropTip(evnt, dragEl, dragPos);
-      internalData.prevDragIndex = currIndex;
-      internalData.prevDragPos = dragPos;
-    };
-    const handleDragSortDragendEvent = (evnt) => {
-      const { fileList, dragIndex } = reactData;
-      const { prevDragIndex, prevDragPos } = internalData;
-      const oldIndex = dragIndex;
-      const targetIndex = prevDragIndex;
-      const dragOffsetIndex = prevDragPos === "bottom" || prevDragPos === "right" ? 1 : 0;
-      const oldItem = fileList[oldIndex];
-      const newItem = fileList[targetIndex];
-      if (oldItem && newItem) {
-        fileList.splice(oldIndex, 1);
-        const ptfIndex = XEUtils.findIndexOf(fileList, (item) => newItem === item);
-        const nIndex = ptfIndex + dragOffsetIndex;
-        fileList.splice(nIndex, 0, oldItem);
-        dispatchEvent(
-          "sort-dragend",
-          {
-            oldItem,
-            newItem,
-            dragPos: prevDragPos,
-            offsetIndex: dragOffsetIndex,
-            _index: {
-              newIndex: nIndex,
-              oldIndex
-            }
-          },
-          evnt
-        );
-      }
-      hideDropTip();
-      reactData.dragIndex = -1;
-    };
-    const handleItemMousedownEvent = (evnt) => {
-      if ($xeTable) {
-        evnt.stopPropagation();
-      }
-      reactData.isActivated = true;
-    };
-    const handleGlobalPasteEvent = (evnt) => {
-      const { pasteToUpload } = props;
-      const { isActivated } = reactData;
-      if (!isActivated || !pasteToUpload) {
-        return;
-      }
-      const clipboardData = evnt.clipboardData || evnt.originalEvent.clipboardData;
-      if (!clipboardData) {
-        return;
-      }
-      const { items } = clipboardData;
-      if (!items) {
-        return;
-      }
-      const files = handleTransferFiles(items);
-      if (files.length) {
-        evnt.preventDefault();
-        uploadTransferFileEvent(evnt, files);
-      }
-    };
-    const handleGlobalClickEvent = (evnt) => {
-      const el = refElem.value;
-      const popupEl = refPopupElem.value;
-      let isActivated = getEventTargetNode(evnt, el).flag;
-      if (!isActivated && popupEl) {
-        const parentEl = popupEl.parentElement || popupEl;
-        const modalEl = parentEl ? parentEl.parentElement : parentEl;
-        isActivated = getEventTargetNode(evnt, modalEl).flag;
-      }
-      reactData.isActivated = isActivated;
-    };
-    const handleGlobalBlurEvent = () => {
-      reactData.isActivated = false;
-    };
-    const handleClearFile = (evnt) => {
-      const { fileList } = reactData;
-      const urlProp = computeUrlProp.value;
-      const rest = [];
-      XEUtils.lastEach(fileList, (item, index) => {
-        rest.push(
-          removeFileEvent(evnt, item, index).then((status) => {
-            return { url: item[urlProp], status };
-          })
-        );
-      });
-      return Promise.all(rest);
-    };
-    const handleRemoveFile = (evnt, urlOrItem) => {
-      const { fileList } = reactData;
-      const urlProp = computeUrlProp.value;
-      const urls = XEUtils.isArray(urlOrItem) ? urlOrItem : [urlOrItem];
-      const rest = [];
-      urls.forEach((obj) => {
-        if (obj) {
-          const url = XEUtils.isString(obj) ? obj : obj[urlProp];
-          const index = XEUtils.findIndexOf(fileList, (fileItem) => fileItem[urlProp] === url);
-          if (index > -1) {
-            rest.push(
-              removeFileEvent(evnt, fileList[index], index).then((status) => {
-                return { url, status };
-              })
-            );
-          }
-        }
-      });
-      return Promise.all(rest);
-    };
-    const uploadMethods = {
-      dispatchEvent,
-      choose() {
-        return handleChoose(null);
-      },
-      clear() {
-        return handleClearFile(null);
-      },
-      clearByEvent(evnt) {
-        return handleClearFile(evnt);
-      },
-      getPendingFiles() {
-        const { fileList, fileCacheMaps } = reactData;
-        const pendingFiles = [];
-        fileList.forEach((item) => {
-          const fileKey = getFieldKey(item);
-          const cacheItem = fileCacheMaps[fileKey];
-          if (cacheItem && cacheItem.status === "pending") {
-            pendingFiles.push(cacheItem.file);
-          }
-        });
-        return pendingFiles;
-      },
-      submit(isFull) {
-        const { maxSimultaneousUploads } = props;
-        const msNum = XEUtils.toNumber(maxSimultaneousUploads || 1) || 1;
-        const { fileList, fileCacheMaps } = reactData;
-        const allPendingList = fileList.filter((item) => {
-          const fileKey = getFieldKey(item);
-          const cacheItem = fileCacheMaps[fileKey];
-          return cacheItem && (cacheItem.status === "pending" || isFull && cacheItem.status === "error");
-        });
-        const handleSubmit = (item) => {
-          const fileKey = getFieldKey(item);
-          const cacheItem = fileCacheMaps[fileKey];
-          if (cacheItem) {
-            const file = cacheItem.file;
-            if (file && (cacheItem.status === "pending" || isFull && cacheItem.status === "error")) {
-              cacheItem.loading = true;
-              cacheItem.percent = 0;
-              return handleUploadResult(item, file).then(handleNextSubmit);
-            }
-          }
-          return handleNextSubmit();
-        };
-        const handleNextSubmit = () => {
-          if (allPendingList.length) {
-            const item = allPendingList[0];
-            allPendingList.splice(0, 1);
-            return handleSubmit(item).then(handleNextSubmit);
-          }
-          return Promise.resolve();
-        };
-        return Promise.all(allPendingList.splice(0, msNum).map(handleSubmit)).then(() => {
+              )
+            ]
+          );
         });
-      },
-      getMoreVisible() {
-        return reactData.showMorePopup;
-      },
-      openMore() {
-        handleMoreEvent({ $event: new Event("click") });
-        return nextTick();
-      },
-      openMoreByEvent(evnt) {
-        handleMoreEvent({ $event: evnt });
-        return nextTick();
-      },
-      closeMore() {
-        if (VxeUI.modal) {
-          VxeUI.modal.close(internalData.moreId);
-        }
-        return nextTick();
-      },
-      remove(urlOrItem) {
-        return handleRemoveFile(null, urlOrItem);
-      },
-      removeByEvent(evnt, urlOrItem) {
-        return handleRemoveFile(evnt, urlOrItem);
-      }
-    };
-    const uploadPrivateMethods = {
-      removeFileEvent
-    };
-    Object.assign($xeUpload, uploadMethods, uploadPrivateMethods);
-    const renderFileItemList = (currList, isMoreView) => {
-      const { showRemoveButton, showDownloadButton, showProgress, progressText, showPreview, showErrorStatus, dragSort, autoSubmit, showSubmitButton } = props;
-      const { fileList, fileCacheMaps } = reactData;
-      const isDisabled = computeIsDisabled.value;
-      const formReadonly = computeFormReadonly.value;
-      const nameProp = computeNameProp.value;
-      const typeProp = computeTypeProp.value;
-      const optionSlot = slots.option;
-      const actionSlot = slots.action;
-      const cornerSlot = slots.corner;
-      const nameSlot = slots.name;
-      const ons = {};
-      if (dragSort && currList.length > 1) {
-        ons.onDragstart = handleDragSortDragstartEvent;
-        ons.onDragover = handleDragSortDragoverEvent;
-        ons.onDragend = handleDragSortDragendEvent;
-      }
-      return currList.map((item, index) => {
-        const fileKey = getFieldKey(item);
-        const cacheItem = fileCacheMaps[fileKey];
-        let isLoading = false;
-        let isError = false;
-        let isPending = false;
-        const fileName = `${item[nameProp] || ""}`;
-        if (cacheItem) {
-          isLoading = cacheItem.loading;
-          isError = cacheItem.status === "error";
-          isPending = cacheItem.status === "pending";
+      };
+      const renderFileAction = (isMoreView) => {
+        const { showUploadButton, buttonText, buttonIcon, showButtonText, showButtonIcon, autoHiddenButton } = props;
+        const { fileList } = reactData;
+        const isDisabled = computeIsDisabled.value;
+        const formReadonly = computeFormReadonly.value;
+        const showTipText = computedShowTipText.value;
+        const defTipText = computedDefTipText.value;
+        const overCount = computeOverCount.value;
+        const defaultSlot = slots.default;
+        const tipSlot = slots.tip || slots.hint;
+        if (formReadonly || !showUploadButton) {
+          return renderEmptyElement($xeUpload);
         }
         return h(
           "div",
           {
-            key: dragSort ? fileKey : index,
-            class: [
-              "vxe-upload--file-item",
-              {
-                "is--preview": showPreview,
-                "is--loading": isLoading,
-                "is--pending": isPending,
-                "is--error": isError
-              }
-            ],
-            fileid: fileKey,
-            draggable: dragSort ? true : null,
-            ...ons
+            class: "vxe-upload--file-action"
           },
-          optionSlot ? getSlotVNs(optionSlot({ option: item, isMoreView, options: fileList })) : [
-            h(
+          [
+            autoHiddenButton && overCount ? renderEmptyElement($xeUpload) : h(
               "div",
               {
-                class: "vxe-upload--file-item-icon"
+                class: "vxe-upload--file-action-btn",
+                onClick: clickEvent
               },
-              [
-                h("i", {
-                  class: getIcon()[`UPLOAD_FILE_TYPE_${`${item[typeProp]}`.toLocaleUpperCase()}`] || getIcon().UPLOAD_FILE_TYPE_DEFAULT
+              defaultSlot ? getSlotVNs(defaultSlot({ isMoreView, options: fileList, $upload: $xeUpload })) : [
+                h(VxeButtonComponent, {
+                  class: "vxe-upload--file-action-button",
+                  content: isMoreView || showButtonText ? buttonText ? `${XEUtils.isFunction(buttonText) ? buttonText({}) : buttonText}` : getI18n("vxe.upload.fileBtnText") : "",
+                  icon: showButtonIcon ? buttonIcon || getIcon().UPLOAD_FILE_ADD : "",
+                  disabled: isDisabled
                 })
               ]
             ),
-            h(
-              "div",
-              {
-                class: "vxe-upload--file-item-name",
-                title: fileName,
-                onClick(evnt) {
-                  if (!isLoading && !isError) {
-                    handlePreviewFileEvent(evnt, item);
-                  }
-                }
-              },
-              nameSlot ? getSlotVNs(nameSlot({ option: item, isMoreView, options: fileList })) : fileName
-            ),
-            isLoading ? h(
-              "div",
-              {
-                class: "vxe-upload--file-item-loading-icon"
-              },
-              [
-                h("i", {
-                  class: getIcon().UPLOAD_LOADING
-                })
-              ]
-            ) : renderEmptyElement($xeUpload),
-            showProgress && isLoading && cacheItem ? h(
+            showTipText && (defTipText || tipSlot) ? h(
               "div",
               {
-                class: "vxe-upload--file-item-loading-text"
+                class: "vxe-upload--file-action-tip"
               },
-              progressText ? XEUtils.toFormatString(`${XEUtils.isFunction(progressText) ? progressText({}) : progressText}`, { percent: cacheItem.percent }) : getI18n("vxe.upload.uploadProgress", [cacheItem.percent])
-            ) : renderEmptyElement($xeUpload),
-            !isLoading && (isError && showErrorStatus || isPending && showSubmitButton && !autoSubmit) ? h(
-              "div",
-              {
-                class: "vxe-upload--file-item-rebtn"
-              },
-              [
-                h(VxeButtonComponent, {
-                  icon: isError ? getIcon().UPLOAD_IMAGE_RE_UPLOAD : getIcon().UPLOAD_IMAGE_UPLOAD,
-                  mode: "text",
-                  status: "primary",
-                  content: isError ? getI18n("vxe.upload.reUpload") : getI18n("vxe.upload.manualUpload"),
-                  onClick(evnt) {
-                    handleReUploadEvent(evnt, item);
-                  }
-                })
-              ]
-            ) : renderEmptyElement($xeUpload),
+              tipSlot ? getSlotVNs(tipSlot({ isMoreView, options: fileList, $upload: $xeUpload })) : `${defTipText}`
+            ) : renderEmptyElement($xeUpload)
+          ]
+        );
+      };
+      const rendeFileMode = () => {
+        const { showList, moreConfig, dragSort } = props;
+        const { fileList, isDragMove } = reactData;
+        const moreOpts = computeMoreOpts.value;
+        const { maxCount, showMoreButton, layout, moreButtonText } = moreOpts;
+        const isHorizontal = layout === "horizontal";
+        const moreBtnSlot = slots.moreButton || slots["more-button"];
+        let currList = fileList;
+        let overMaxNum = 0;
+        let isMoreMax = false;
+        let isMiniMore = false;
+        if (XEUtils.isNumber(maxCount) && fileList.length > maxCount) {
+          isMoreMax = true;
+          isMiniMore = maxCount === 0;
+          overMaxNum = fileList.length - maxCount;
+          currList = fileList.slice(0, maxCount);
+        }
+        return h(
+          "div",
+          {
+            key: "all",
+            class: "vxe-upload--file-wrapper"
+          },
+          showList ? [
+            showMoreButton && moreConfig && isHorizontal ? renderEmptyElement($xeUpload) : renderFileAction(true),
             h(
               "div",
               {
-                class: "vxe-upload--file-item-btn-wrapper"
+                class: [
+                  "vxe-upload--file-list-wrapper",
+                  {
+                    "is--horizontal": isHorizontal
+                  }
+                ]
               },
-              actionSlot ? getSlotVNs(actionSlot({ option: item, isMoreView, options: fileList, readonly: formReadonly })) : [
-                cornerSlot ? h(
-                  "div",
+              [
+                currList.length ? dragSort ? h(
+                  TransitionGroup,
                   {
-                    class: "vxe-upload--file-item-action"
+                    name: `vxe-upload--drag-list${isDragMove ? "" : "-disabled"}`,
+                    tag: "div",
+                    class: "vxe-upload--file-list"
                   },
-                  getSlotVNs(cornerSlot({ option: item, isMoreView, options: fileList, readonly: formReadonly }))
-                ) : renderEmptyElement($xeUpload),
-                showDownloadButton && !(isLoading || isPending) ? h(
-                  "div",
                   {
-                    class: "vxe-upload--file-item-download-btn",
-                    onClick(evnt) {
-                      downloadFileEvent(evnt, item);
-                    }
-                  },
-                  [
-                    h("i", {
-                      class: getIcon().UPLOAD_FILE_DOWNLOAD
-                    })
-                  ]
+                    default: () => renderFileItemList(currList, false)
+                  }
+                ) : h(
+                  "div",
+                  {
+                    class: "vxe-upload--file-list"
+                  },
+                  renderFileItemList(currList, false)
                 ) : renderEmptyElement($xeUpload),
-                showRemoveButton && !formReadonly && !isDisabled && !isLoading ? h(
+                showMoreButton && overMaxNum ? h(
                   "div",
                   {
-                    class: "vxe-upload--file-item-remove-btn",
-                    onClick(evnt) {
-                      removeFileEvent(evnt, item, index);
-                    }
+                    class: "vxe-upload--file-over-more"
                   },
-                  [
-                    h("i", {
-                      class: getIcon().UPLOAD_FILE_REMOVE
+                  moreBtnSlot ? getSlotVNs(moreBtnSlot({ options: fileList })) : [
+                    h(VxeButtonComponent, {
+                      mode: "text",
+                      content: moreButtonText ? XEUtils.isFunction(moreButtonText) ? moreButtonText({ $upload: $xeUpload, options: fileList }) : XEUtils.toFormatString(moreButtonText, [fileList.length]) : getI18n(isMoreMax && isMiniMore ? "vxe.upload.moreFileBtnText" : "vxe.upload.moreBtnText", [fileList.length]),
+                      status: "primary",
+                      onClick: handleMoreEvent
                     })
                   ]
-                ) : renderEmptyElement($xeUpload)
+                ) : renderEmptyElement($xeUpload),
+                showMoreButton && moreConfig && isHorizontal ? renderFileAction(false) : renderEmptyElement($xeUpload)
               ]
             )
-          ]
+          ] : [renderFileAction(false)]
         );
-      });
-    };
-    const renderFileAction = (isMoreView) => {
-      const { showUploadButton, buttonText, buttonIcon, showButtonText, showButtonIcon, autoHiddenButton } = props;
-      const { fileList } = reactData;
-      const isDisabled = computeIsDisabled.value;
-      const formReadonly = computeFormReadonly.value;
-      const showTipText = computedShowTipText.value;
-      const defTipText = computedDefTipText.value;
-      const overCount = computeOverCount.value;
-      const defaultSlot = slots.default;
-      const tipSlot = slots.tip || slots.hint;
-      if (formReadonly || !showUploadButton) {
-        return renderEmptyElement($xeUpload);
-      }
-      return h(
-        "div",
-        {
-          class: "vxe-upload--file-action"
-        },
-        [
-          autoHiddenButton && overCount ? renderEmptyElement($xeUpload) : h(
-            "div",
-            {
-              class: "vxe-upload--file-action-btn",
-              onClick: clickEvent
-            },
-            defaultSlot ? getSlotVNs(defaultSlot({ isMoreView, options: fileList, $upload: $xeUpload })) : [
-              h(VxeButtonComponent, {
-                class: "vxe-upload--file-action-button",
-                content: isMoreView || showButtonText ? buttonText ? `${XEUtils.isFunction(buttonText) ? buttonText({}) : buttonText}` : getI18n("vxe.upload.fileBtnText") : "",
-                icon: showButtonIcon ? buttonIcon || getIcon().UPLOAD_FILE_ADD : "",
-                disabled: isDisabled
-              })
-            ]
-          ),
-          showTipText && (defTipText || tipSlot) ? h(
-            "div",
-            {
-              class: "vxe-upload--file-action-tip"
-            },
-            tipSlot ? getSlotVNs(tipSlot({ isMoreView, options: fileList, $upload: $xeUpload })) : `${defTipText}`
-          ) : renderEmptyElement($xeUpload)
-        ]
-      );
-    };
-    const rendeFileMode = () => {
-      const { showList, moreConfig, dragSort } = props;
-      const { fileList, isDragMove } = reactData;
-      const moreOpts = computeMoreOpts.value;
-      const { maxCount, showMoreButton, layout, moreButtonText } = moreOpts;
-      const isHorizontal = layout === "horizontal";
-      const moreBtnSlot = slots.moreButton || slots["more-button"];
-      let currList = fileList;
-      let overMaxNum = 0;
-      let isMoreMax = false;
-      let isMiniMore = false;
-      if (XEUtils.isNumber(maxCount) && fileList.length > maxCount) {
-        isMoreMax = true;
-        isMiniMore = maxCount === 0;
-        overMaxNum = fileList.length - maxCount;
-        currList = fileList.slice(0, maxCount);
-      }
-      return h(
-        "div",
-        {
-          key: "all",
-          class: "vxe-upload--file-wrapper"
-        },
-        showList ? [
-          showMoreButton && moreConfig && isHorizontal ? renderEmptyElement($xeUpload) : renderFileAction(true),
-          h(
+      };
+      const renderImageItemList = (currList, isMoreView) => {
+        const { showRemoveButton, showProgress, progressText, showPreview, showErrorStatus, dragSort, autoSubmit, showSubmitButton } = props;
+        const { fileList, fileCacheMaps } = reactData;
+        const isDisabled = computeIsDisabled.value;
+        const formReadonly = computeFormReadonly.value;
+        const imageOpts = computeImageOpts.value;
+        const imgStyle = computeImgStyle.value;
+        const optionSlot = slots.option;
+        const actionSlot = slots.action;
+        const cornerSlot = slots.corner;
+        const ons = {
+          onMousedown: handleItemMousedownEvent
+        };
+        if (dragSort && currList.length > 1) {
+          ons.onDragstart = handleDragSortDragstartEvent;
+          ons.onDragover = handleDragSortDragoverEvent;
+          ons.onDragend = handleDragSortDragendEvent;
+        }
+        return currList.map((item, index) => {
+          const fileKey = getFieldKey(item);
+          const cacheItem = fileCacheMaps[fileKey];
+          let isLoading = false;
+          let isError = false;
+          let isPending = false;
+          if (cacheItem) {
+            isLoading = cacheItem.loading;
+            isError = cacheItem.status === "error";
+            isPending = cacheItem.status === "pending";
+          }
+          return h(
             "div",
             {
+              key: dragSort ? fileKey : index,
               class: [
-                "vxe-upload--file-list-wrapper",
+                "vxe-upload--image-item",
                 {
-                  "is--horizontal": isHorizontal
+                  "is--preview": showPreview,
+                  "is--circle": imageOpts.circle,
+                  "is--loading": isLoading,
+                  "is--pending": isPending,
+                  "is--error": isError
                 }
-              ]
+              ],
+              fileid: fileKey,
+              draggable: dragSort ? true : null,
+              ...ons
             },
-            [
-              currList.length ? dragSort ? h(
-                TransitionGroup,
-                {
-                  name: `vxe-upload--drag-list${isDragMove ? "" : "-disabled"}`,
-                  tag: "div",
-                  class: "vxe-upload--file-list"
-                },
-                {
-                  default: () => renderFileItemList(currList, false)
-                }
-              ) : h(
-                "div",
-                {
-                  class: "vxe-upload--file-list"
-                },
-                renderFileItemList(currList, false)
-              ) : renderEmptyElement($xeUpload),
-              showMoreButton && overMaxNum ? h(
+            optionSlot ? getSlotVNs(optionSlot({ option: item, isMoreView, options: fileList })) : [
+              h(
                 "div",
                 {
-                  class: "vxe-upload--file-over-more"
+                  class: "vxe-upload--image-item-box",
+                  style: isMoreView ? null : imgStyle,
+                  onClick(evnt) {
+                    if (!isLoading && !isError) {
+                      handlePreviewImageEvent(evnt, item, index);
+                    }
+                  }
                 },
-                moreBtnSlot ? getSlotVNs(moreBtnSlot({ options: fileList })) : [
-                  h(VxeButtonComponent, {
-                    mode: "text",
-                    content: moreButtonText ? XEUtils.isFunction(moreButtonText) ? moreButtonText({ $upload: $xeUpload, options: fileList }) : XEUtils.toFormatString(moreButtonText, [fileList.length]) : getI18n(isMoreMax && isMiniMore ? "vxe.upload.moreFileBtnText" : "vxe.upload.moreBtnText", [fileList.length]),
-                    status: "primary",
-                    onClick: handleMoreEvent
-                  })
+                [
+                  isLoading && cacheItem ? h(
+                    "div",
+                    {
+                      class: "vxe-upload--image-item-loading"
+                    },
+                    [
+                      h(
+                        "div",
+                        {
+                          class: "vxe-upload--image-item-loading-icon"
+                        },
+                        [
+                          h("i", {
+                            class: getIcon().UPLOAD_LOADING
+                          })
+                        ]
+                      ),
+                      showProgress ? h(
+                        "div",
+                        {
+                          class: "vxe-upload--image-item-loading-text"
+                        },
+                        progressText ? XEUtils.toFormatString(`${XEUtils.isFunction(progressText) ? progressText({}) : progressText}`, { percent: cacheItem.percent }) : getI18n("vxe.upload.uploadProgress", [cacheItem.percent])
+                      ) : renderEmptyElement($xeUpload)
+                    ]
+                  ) : renderEmptyElement($xeUpload),
+                  h(
+                    "div",
+                    {
+                      class: "vxe-upload--image-item-img-wrapper",
+                      title: getI18n("vxe.upload.viewItemTitle")
+                    },
+                    [
+                      h("img", {
+                        class: "vxe-upload--image-item-img",
+                        src: getThumbnailFileUrl(item)
+                      })
+                    ]
+                  ),
+                  !isLoading && (isError && showErrorStatus || isPending && showSubmitButton && !autoSubmit) ? h(
+                    "div",
+                    {
+                      class: "vxe-upload--image-item-rebtn"
+                    },
+                    [
+                      h(VxeButtonComponent, {
+                        icon: isError ? getIcon().UPLOAD_IMAGE_RE_UPLOAD : getIcon().UPLOAD_IMAGE_UPLOAD,
+                        mode: "text",
+                        status: "primary",
+                        content: isError ? getI18n("vxe.upload.reUpload") : getI18n("vxe.upload.manualUpload"),
+                        onClick(evnt) {
+                          handleReUploadEvent(evnt, item);
+                        }
+                      })
+                    ]
+                  ) : renderEmptyElement($xeUpload),
+                  h(
+                    "div",
+                    {
+                      class: "vxe-upload--image-item-btn-wrapper",
+                      onClick(evnt) {
+                        evnt.stopPropagation();
+                      }
+                    },
+                    actionSlot ? getSlotVNs(actionSlot({ option: item, isMoreView, options: fileList, readonly: formReadonly })) : [
+                      cornerSlot ? h(
+                        "div",
+                        {
+                          class: "vxe-upload--file-item-action"
+                        },
+                        getSlotVNs(cornerSlot({ option: item, isMoreView, options: fileList, readonly: formReadonly }))
+                      ) : renderEmptyElement($xeUpload),
+                      showRemoveButton && !formReadonly && !isDisabled && !isLoading ? h(
+                        "div",
+                        {
+                          class: "vxe-upload--image-item-remove-btn",
+                          onClick(evnt) {
+                            evnt.stopPropagation();
+                            removeFileEvent(evnt, item, index);
+                          }
+                        },
+                        [
+                          h("i", {
+                            class: getIcon().UPLOAD_IMAGE_REMOVE
+                          })
+                        ]
+                      ) : renderEmptyElement($xeUpload)
+                    ]
+                  )
                 ]
-              ) : renderEmptyElement($xeUpload),
-              showMoreButton && moreConfig && isHorizontal ? renderFileAction(false) : renderEmptyElement($xeUpload)
+              )
             ]
-          )
-        ] : [renderFileAction(false)]
-      );
-    };
-    const renderImageItemList = (currList, isMoreView) => {
-      const { showRemoveButton, showProgress, progressText, showPreview, showErrorStatus, dragSort, autoSubmit, showSubmitButton } = props;
-      const { fileList, fileCacheMaps } = reactData;
-      const isDisabled = computeIsDisabled.value;
-      const formReadonly = computeFormReadonly.value;
-      const imageOpts = computeImageOpts.value;
-      const imgStyle = computeImgStyle.value;
-      const optionSlot = slots.option;
-      const actionSlot = slots.action;
-      const cornerSlot = slots.corner;
-      const ons = {
-        onMousedown: handleItemMousedownEvent
+          );
+        });
       };
-      if (dragSort && currList.length > 1) {
-        ons.onDragstart = handleDragSortDragstartEvent;
-        ons.onDragover = handleDragSortDragoverEvent;
-        ons.onDragend = handleDragSortDragendEvent;
-      }
-      return currList.map((item, index) => {
-        const fileKey = getFieldKey(item);
-        const cacheItem = fileCacheMaps[fileKey];
-        let isLoading = false;
-        let isError = false;
-        let isPending = false;
-        if (cacheItem) {
-          isLoading = cacheItem.loading;
-          isError = cacheItem.status === "error";
-          isPending = cacheItem.status === "pending";
+      const renderImageAction = (isMoreView) => {
+        const { showUploadButton, buttonText, buttonIcon, showButtonText, showButtonIcon, autoHiddenButton } = props;
+        const { fileList } = reactData;
+        const formReadonly = computeFormReadonly.value;
+        const showTipText = computedShowTipText.value;
+        const defTipText = computedDefTipText.value;
+        const overCount = computeOverCount.value;
+        const imgStyle = computeImgStyle.value;
+        const defaultSlot = slots.default;
+        const tipSlot = slots.tip || slots.hint;
+        if (formReadonly || !showUploadButton || autoHiddenButton && overCount) {
+          return renderEmptyElement($xeUpload);
         }
         return h(
           "div",
           {
-            key: dragSort ? fileKey : index,
-            class: [
-              "vxe-upload--image-item",
-              {
-                "is--preview": showPreview,
-                "is--circle": imageOpts.circle,
-                "is--loading": isLoading,
-                "is--pending": isPending,
-                "is--error": isError
-              }
-            ],
-            fileid: fileKey,
-            draggable: dragSort ? true : null,
-            ...ons
+            key: "action",
+            class: "vxe-upload--image-action"
           },
-          optionSlot ? getSlotVNs(optionSlot({ option: item, isMoreView, options: fileList })) : [
+          [
             h(
               "div",
               {
-                class: "vxe-upload--image-item-box",
-                style: isMoreView ? null : imgStyle,
-                onClick(evnt) {
-                  if (!isLoading && !isError) {
-                    handlePreviewImageEvent(evnt, item, index);
-                  }
-                }
+                class: "vxe-upload--image-action-btn",
+                onClick: clickEvent
               },
-              [
-                isLoading && cacheItem ? h(
+              defaultSlot ? defaultSlot({ isMoreView, options: fileList, $upload: $xeUpload }) : [
+                h(
                   "div",
                   {
-                    class: "vxe-upload--image-item-loading"
+                    class: "vxe-upload--image-action-box",
+                    style: isMoreView ? null : imgStyle
                   },
                   [
-                    h(
+                    showButtonIcon ? h(
                       "div",
                       {
-                        class: "vxe-upload--image-item-loading-icon"
+                        class: "vxe-upload--image-action-icon"
                       },
                       [
                         h("i", {
-                          class: getIcon().UPLOAD_LOADING
+                          class: buttonIcon || getIcon().UPLOAD_IMAGE_ADD
                         })
                       ]
-                    ),
-                    showProgress ? h(
-                      "div",
-                      {
-                        class: "vxe-upload--image-item-loading-text"
-                      },
-                      progressText ? XEUtils.toFormatString(`${XEUtils.isFunction(progressText) ? progressText({}) : progressText}`, { percent: cacheItem.percent }) : getI18n("vxe.upload.uploadProgress", [cacheItem.percent])
-                    ) : renderEmptyElement($xeUpload)
-                  ]
-                ) : renderEmptyElement($xeUpload),
-                h(
-                  "div",
-                  {
-                    class: "vxe-upload--image-item-img-wrapper",
-                    title: getI18n("vxe.upload.viewItemTitle")
-                  },
-                  [
-                    h("img", {
-                      class: "vxe-upload--image-item-img",
-                      src: getThumbnailFileUrl(item)
-                    })
-                  ]
-                ),
-                !isLoading && (isError && showErrorStatus || isPending && showSubmitButton && !autoSubmit) ? h(
-                  "div",
-                  {
-                    class: "vxe-upload--image-item-rebtn"
-                  },
-                  [
-                    h(VxeButtonComponent, {
-                      icon: isError ? getIcon().UPLOAD_IMAGE_RE_UPLOAD : getIcon().UPLOAD_IMAGE_UPLOAD,
-                      mode: "text",
-                      status: "primary",
-                      content: isError ? getI18n("vxe.upload.reUpload") : getI18n("vxe.upload.manualUpload"),
-                      onClick(evnt) {
-                        handleReUploadEvent(evnt, item);
-                      }
-                    })
-                  ]
-                ) : renderEmptyElement($xeUpload),
-                h(
-                  "div",
-                  {
-                    class: "vxe-upload--image-item-btn-wrapper",
-                    onClick(evnt) {
-                      evnt.stopPropagation();
-                    }
-                  },
-                  actionSlot ? getSlotVNs(actionSlot({ option: item, isMoreView, options: fileList, readonly: formReadonly })) : [
-                    cornerSlot ? h(
+                    ) : renderEmptyElement($xeUpload),
+                    isMoreView || showButtonText ? h(
                       "div",
                       {
-                        class: "vxe-upload--file-item-action"
+                        class: "vxe-upload--image-action-content"
                       },
-                      getSlotVNs(cornerSlot({ option: item, isMoreView, options: fileList, readonly: formReadonly }))
+                      buttonText ? `${XEUtils.isFunction(buttonText) ? buttonText({}) : buttonText}` : getI18n("vxe.upload.imgBtnText")
                     ) : renderEmptyElement($xeUpload),
-                    showRemoveButton && !formReadonly && !isDisabled && !isLoading ? h(
+                    showTipText && (defTipText || tipSlot) ? h(
                       "div",
                       {
-                        class: "vxe-upload--image-item-remove-btn",
-                        onClick(evnt) {
-                          evnt.stopPropagation();
-                          removeFileEvent(evnt, item, index);
-                        }
+                        class: "vxe-upload--image-action-hint"
                       },
-                      [
-                        h("i", {
-                          class: getIcon().UPLOAD_IMAGE_REMOVE
-                        })
-                      ]
+                      tipSlot ? getSlotVNs(tipSlot({ isMoreView, options: fileList, $upload: $xeUpload })) : `${defTipText}`
                     ) : renderEmptyElement($xeUpload)
                   ]
                 )
@@ -1757,110 +1826,66 @@ var upload_default = defineVxeComponent({
             )
           ]
         );
-      });
-    };
-    const renderImageAction = (isMoreView) => {
-      const { showUploadButton, buttonText, buttonIcon, showButtonText, showButtonIcon, autoHiddenButton } = props;
-      const { fileList } = reactData;
-      const formReadonly = computeFormReadonly.value;
-      const showTipText = computedShowTipText.value;
-      const defTipText = computedDefTipText.value;
-      const overCount = computeOverCount.value;
-      const imgStyle = computeImgStyle.value;
-      const defaultSlot = slots.default;
-      const tipSlot = slots.tip || slots.hint;
-      if (formReadonly || !showUploadButton || autoHiddenButton && overCount) {
-        return renderEmptyElement($xeUpload);
-      }
-      return h(
-        "div",
-        {
-          key: "action",
-          class: "vxe-upload--image-action"
-        },
-        [
-          h(
-            "div",
-            {
-              class: "vxe-upload--image-action-btn",
-              onClick: clickEvent
-            },
-            defaultSlot ? defaultSlot({ isMoreView, options: fileList, $upload: $xeUpload }) : [
-              h(
-                "div",
-                {
-                  class: "vxe-upload--image-action-box",
-                  style: isMoreView ? null : imgStyle
-                },
-                [
-                  showButtonIcon ? h(
+      };
+      const renderImageMode = () => {
+        const { showList, dragSort } = props;
+        const { fileList, isDragMove } = reactData;
+        const moreOpts = computeMoreOpts.value;
+        const moreBtnSlot = slots.moreButton || slots["more-button"];
+        const { maxCount, showMoreButton, moreButtonText } = moreOpts;
+        let currList = fileList;
+        let overMaxNum = 0;
+        let isMoreMax = false;
+        let isMiniMore = false;
+        if (XEUtils.isNumber(maxCount) && fileList.length > maxCount) {
+          isMoreMax = true;
+          isMiniMore = maxCount === 0;
+          overMaxNum = fileList.length - maxCount;
+          currList = fileList.slice(0, maxCount);
+        }
+        return h(
+          "div",
+          {
+            key: "image",
+            class: "vxe-upload--image-wrapper"
+          },
+          showList ? [
+            dragSort ? h(
+              TransitionGroup,
+              {
+                name: `vxe-upload--drag-list${isDragMove ? "" : "-disabled"}`,
+                tag: "div",
+                class: "vxe-upload--image-list"
+              },
+              {
+                default: () => renderImageItemList(currList, false).concat([
+                  showMoreButton && overMaxNum ? h(
                     "div",
                     {
-                      class: "vxe-upload--image-action-icon"
+                      key: "om",
+                      class: "vxe-upload--image-over-more"
                     },
-                    [
-                      h("i", {
-                        class: buttonIcon || getIcon().UPLOAD_IMAGE_ADD
+                    moreBtnSlot ? getSlotVNs(moreBtnSlot({ options: fileList })) : [
+                      h(VxeButtonComponent, {
+                        mode: "text",
+                        content: moreButtonText ? XEUtils.isFunction(moreButtonText) ? moreButtonText({ $upload: $xeUpload, options: fileList }) : XEUtils.toFormatString(moreButtonText, [fileList.length]) : getI18n(isMoreMax && isMiniMore ? "vxe.upload.moreImgBtnText" : "vxe.upload.moreBtnText", [fileList.length]),
+                        status: "primary",
+                        onClick: handleMoreEvent
                       })
                     ]
                   ) : renderEmptyElement($xeUpload),
-                  isMoreView || showButtonText ? h(
-                    "div",
-                    {
-                      class: "vxe-upload--image-action-content"
-                    },
-                    buttonText ? `${XEUtils.isFunction(buttonText) ? buttonText({}) : buttonText}` : getI18n("vxe.upload.imgBtnText")
-                  ) : renderEmptyElement($xeUpload),
-                  showTipText && (defTipText || tipSlot) ? h(
-                    "div",
-                    {
-                      class: "vxe-upload--image-action-hint"
-                    },
-                    tipSlot ? getSlotVNs(tipSlot({ isMoreView, options: fileList, $upload: $xeUpload })) : `${defTipText}`
-                  ) : renderEmptyElement($xeUpload)
-                ]
-              )
-            ]
-          )
-        ]
-      );
-    };
-    const renderImageMode = () => {
-      const { showList, dragSort } = props;
-      const { fileList, isDragMove } = reactData;
-      const moreOpts = computeMoreOpts.value;
-      const moreBtnSlot = slots.moreButton || slots["more-button"];
-      const { maxCount, showMoreButton, moreButtonText } = moreOpts;
-      let currList = fileList;
-      let overMaxNum = 0;
-      let isMoreMax = false;
-      let isMiniMore = false;
-      if (XEUtils.isNumber(maxCount) && fileList.length > maxCount) {
-        isMoreMax = true;
-        isMiniMore = maxCount === 0;
-        overMaxNum = fileList.length - maxCount;
-        currList = fileList.slice(0, maxCount);
-      }
-      return h(
-        "div",
-        {
-          key: "image",
-          class: "vxe-upload--image-wrapper"
-        },
-        showList ? [
-          dragSort ? h(
-            TransitionGroup,
-            {
-              name: `vxe-upload--drag-list${isDragMove ? "" : "-disabled"}`,
-              tag: "div",
-              class: "vxe-upload--image-list"
-            },
-            {
-              default: () => renderImageItemList(currList, false).concat([
+                  renderImageAction(false)
+                ])
+              }
+            ) : h(
+              "div",
+              {
+                class: "vxe-upload--image-list"
+              },
+              renderImageItemList(currList, false).concat([
                 showMoreButton && overMaxNum ? h(
                   "div",
                   {
-                    key: "om",
                     class: "vxe-upload--image-over-more"
                   },
                   moreBtnSlot ? getSlotVNs(moreBtnSlot({ options: fileList })) : [
@@ -1874,136 +1899,114 @@ var upload_default = defineVxeComponent({
                 ) : renderEmptyElement($xeUpload),
                 renderImageAction(false)
               ])
-            }
-          ) : h(
-            "div",
-            {
-              class: "vxe-upload--image-list"
-            },
-            renderImageItemList(currList, false).concat([
-              showMoreButton && overMaxNum ? h(
-                "div",
-                {
-                  class: "vxe-upload--image-over-more"
-                },
-                moreBtnSlot ? getSlotVNs(moreBtnSlot({ options: fileList })) : [
-                  h(VxeButtonComponent, {
-                    mode: "text",
-                    content: moreButtonText ? XEUtils.isFunction(moreButtonText) ? moreButtonText({ $upload: $xeUpload, options: fileList }) : XEUtils.toFormatString(moreButtonText, [fileList.length]) : getI18n(isMoreMax && isMiniMore ? "vxe.upload.moreImgBtnText" : "vxe.upload.moreBtnText", [fileList.length]),
-                    status: "primary",
-                    onClick: handleMoreEvent
-                  })
-                ]
-              ) : renderEmptyElement($xeUpload),
-              renderImageAction(false)
-            ])
-          )
-        ] : [
-          h(
-            "div",
-            {
-              class: "vxe-upload--image-list"
-            },
-            [renderImageAction(false)]
-          )
-        ]
-      );
-    };
-    const renderVN = () => {
-      const { showErrorStatus, dragToUpload, pasteToUpload, dragSort, dragPlaceholder } = props;
-      const { isDragUploadStatus, showMorePopup, isActivated, dragIndex } = reactData;
-      const vSize = computeSize.value;
-      const isDisabled = computeIsDisabled.value;
-      const formReadonly = computeFormReadonly.value;
-      const isImage = computeIsImage.value;
-      const ons = {
-        onMousedown: handleItemMousedownEvent
+            )
+          ] : [
+            h(
+              "div",
+              {
+                class: "vxe-upload--image-list"
+              },
+              [renderImageAction(false)]
+            )
+          ]
+        );
       };
-      if (dragToUpload && dragIndex === -1) {
-        ons.onDragover = handleUploadDragoverEvent;
-        ons.onDragleave = handleUploadDragleaveEvent;
-        ons.onDrop = handleUploadDropEvent;
-      }
-      return h(
-        "div",
-        {
-          ref: refElem,
-          class: [
-            "vxe-upload",
-            {
-              [`size--${vSize}`]: vSize,
-              "is--active": isActivated,
-              "is--readonly": formReadonly,
-              "is--disabled": isDisabled,
-              "is--paste": pasteToUpload,
-              "show--error": showErrorStatus,
-              "is--drag": isDragUploadStatus
-            }
-          ],
-          ...ons
-        },
-        [
-          isImage ? renderImageMode() : rendeFileMode(),
-          dragSort ? h("div", {
-            ref: refDragLineElem,
-            class: "vxe-upload--drag-line"
-          }) : renderEmptyElement($xeUpload),
-          isDragUploadStatus && !showMorePopup ? h(
-            "div",
-            {
-              class: "vxe-upload--drag-placeholder"
-            },
-            dragPlaceholder || getI18n("vxe.upload.dragPlaceholder")
-          ) : renderEmptyElement($xeUpload)
-        ]
+      const renderVN = () => {
+        const { showErrorStatus, dragToUpload, pasteToUpload, dragSort, dragPlaceholder } = props;
+        const { isDragUploadStatus, showMorePopup, isActivated, dragIndex } = reactData;
+        const vSize = computeSize.value;
+        const isDisabled = computeIsDisabled.value;
+        const formReadonly = computeFormReadonly.value;
+        const isImage = computeIsImage.value;
+        const ons = {
+          onMousedown: handleItemMousedownEvent
+        };
+        if (dragToUpload && dragIndex === -1) {
+          ons.onDragover = handleUploadDragoverEvent;
+          ons.onDragleave = handleUploadDragleaveEvent;
+          ons.onDrop = handleUploadDropEvent;
+        }
+        return h(
+          "div",
+          {
+            ref: refElem,
+            class: [
+              "vxe-upload",
+              {
+                [`size--${vSize}`]: vSize,
+                "is--active": isActivated,
+                "is--readonly": formReadonly,
+                "is--disabled": isDisabled,
+                "is--paste": pasteToUpload,
+                "show--error": showErrorStatus,
+                "is--drag": isDragUploadStatus
+              }
+            ],
+            ...ons
+          },
+          [
+            isImage ? renderImageMode() : rendeFileMode(),
+            dragSort ? h("div", {
+              ref: refDragLineElem,
+              class: "vxe-upload--drag-line"
+            }) : renderEmptyElement($xeUpload),
+            isDragUploadStatus && !showMorePopup ? h(
+              "div",
+              {
+                class: "vxe-upload--drag-placeholder"
+              },
+              dragPlaceholder || getI18n("vxe.upload.dragPlaceholder")
+            ) : renderEmptyElement($xeUpload)
+          ]
+        );
+      };
+      const listFlag = ref(0);
+      watch(
+        () => props.modelValue ? props.modelValue.length : 0,
+        () => {
+          listFlag.value++;
+        }
       );
-    };
-    const listFlag = ref(0);
-    watch(
-      () => props.modelValue ? props.modelValue.length : 0,
-      () => {
-        listFlag.value++;
-      }
-    );
-    watch(
-      () => props.modelValue,
-      () => {
-        listFlag.value++;
-      }
-    );
-    watch(listFlag, () => {
+      watch(
+        () => props.modelValue,
+        () => {
+          listFlag.value++;
+        }
+      );
+      watch(listFlag, () => {
+        updateFileList();
+      });
+      onMounted(() => {
+        if (props.multiple && props.singleMode) {
+          errLog("vxe.error.errConflicts", ["multiple", "single-mode"]);
+        }
+        if (props.imageStyle) {
+          warnLog("vxe.error.delProp", ["image-style", "image-config"]);
+        }
+        if (props.dragSort) {
+          initTpImg();
+        }
+        globalEvents.on($xeUpload, "paste", handleGlobalPasteEvent);
+        globalEvents.on($xeUpload, "click", handleGlobalClickEvent);
+        globalEvents.on($xeUpload, "blur", handleGlobalBlurEvent);
+      });
+      onBeforeUnmount(() => {
+        reactData.isDragUploadStatus = false;
+        globalEvents.off($xeUpload, "paste");
+        globalEvents.off($xeUpload, "click");
+        globalEvents.off($xeUpload, "blur");
+        XEUtils.assign(reactData, createReactData());
+        XEUtils.assign(internalData, createInternalData());
+      });
       updateFileList();
-    });
-    onMounted(() => {
-      if (props.multiple && props.singleMode) {
-        errLog("vxe.error.errConflicts", ["multiple", "single-mode"]);
-      }
-      if (props.imageStyle) {
-        warnLog("vxe.error.delProp", ["image-style", "image-config"]);
-      }
-      if (props.dragSort) {
-        initTpImg();
-      }
-      globalEvents.on($xeUpload, "paste", handleGlobalPasteEvent);
-      globalEvents.on($xeUpload, "click", handleGlobalClickEvent);
-      globalEvents.on($xeUpload, "blur", handleGlobalBlurEvent);
-    });
-    onBeforeUnmount(() => {
-      reactData.isDragUploadStatus = false;
-      globalEvents.off($xeUpload, "paste");
-      globalEvents.off($xeUpload, "click");
-      globalEvents.off($xeUpload, "blur");
-      XEUtils.assign(reactData, createReactData());
-      XEUtils.assign(internalData, createInternalData());
-    });
-    updateFileList();
-    $xeUpload.renderVN = renderVN;
-    return $xeUpload;
-  },
-  render() {
-    return this.renderVN();
-  }
-});
+      $xeUpload.renderVN = renderVN;
+      return $xeUpload;
+    },
+    render() {
+      return this.renderVN();
+    }
+  })
+);
 export {
   upload_default as default
 };