vxe-pc-ui 3.16.0 → 3.16.2

package/lib/upload/src/upload.js

@@ -0,0 +1,2174 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _comp = require("../../ui/src/comp");
+var _xeUtils = _interopRequireDefault(require("xe-utils"));
+var _ui = require("../../ui");
+var _vn = require("../../ui/src/vn");
+var _log = require("../../ui/src/log");
+var _dom = require("../../ui/src/dom");
+var _util = require("./util");
+var _button = _interopRequireDefault(require("../../button/src/button"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+var _createComponentLog = (0, _log.createComponentLog)('upload'),
+  warnLog = _createComponentLog.warnLog,
+  errLog = _createComponentLog.errLog;
+function getUniqueKey() {
+  return _xeUtils.default.uniqueId();
+}
+function handleTransferFiles(items) {
+  var files = [];
+  _xeUtils.default.arrayEach(items, function (item) {
+    var file = item.getAsFile();
+    if (file) {
+      files.push(file);
+    }
+  });
+  return files;
+}
+function showDropTip($xeUpload, evnt, dragEl, dragPos) {
+  var xID = $xeUpload.xID;
+  var reactData = $xeUpload.reactData;
+  var showMorePopup = reactData.showMorePopup;
+  var el = $xeUpload.$refs.refElem;
+  var popupEl = document.getElementById("refPopupElem".concat(xID));
+  var wrapperEl = showMorePopup ? popupEl : el;
+  if (!wrapperEl) {
+    return;
+  }
+  var wrapperRect = wrapperEl.getBoundingClientRect();
+  var ddLineEl = $xeUpload.$refs.refDragLineElem;
+  var mdLineEl = document.getElementById("refModalDragLineElem".concat(xID));
+  var currDLineEl = showMorePopup ? mdLineEl : ddLineEl;
+  if (currDLineEl) {
+    var dragRect = dragEl.getBoundingClientRect();
+    currDLineEl.style.display = 'block';
+    currDLineEl.style.top = "".concat(Math.max(1, dragRect.y - wrapperRect.y), "px");
+    currDLineEl.style.left = "".concat(Math.max(1, dragRect.x - wrapperRect.x), "px");
+    currDLineEl.style.height = "".concat(dragRect.height, "px");
+    currDLineEl.style.width = "".concat(dragRect.width - 1, "px");
+    currDLineEl.setAttribute('drag-pos', dragPos);
+  }
+}
+function hideDropTip($xeUpload) {
+  var xID = $xeUpload.xID;
+  var ddLineEl = $xeUpload.$refs.refDragLineElem;
+  var mdLineEl = document.getElementById("refModalDragLineElem".concat(xID));
+  if (ddLineEl) {
+    ddLineEl.style.display = '';
+  }
+  if (mdLineEl) {
+    mdLineEl.style.display = '';
+  }
+}
+var handleClearFile = function handleClearFile($xeUpload, evnt) {
+  var reactData = $xeUpload.reactData;
+  var fileList = reactData.fileList;
+  var urlProp = $xeUpload.computeUrlProp;
+  var rest = [];
+  _xeUtils.default.lastEach(fileList, function (item, index) {
+    rest.push($xeUpload.removeFileEvent(evnt, item, index).then(function (status) {
+      return {
+        url: item[urlProp],
+        status: status
+      };
+    }));
+  });
+  return Promise.all(rest);
+};
+function handleRemoveFile($xeUpload, evnt, urlOrItem) {
+  var reactData = $xeUpload.reactData;
+  var fileList = reactData.fileList;
+  var urlProp = $xeUpload.computeUrlProp;
+  var urls = _xeUtils.default.isArray(urlOrItem) ? urlOrItem : [urlOrItem];
+  var rest = [];
+  urls.forEach(function (obj) {
+    if (obj) {
+      var url = _xeUtils.default.isString(obj) ? obj : obj[urlProp];
+      var index = _xeUtils.default.findIndexOf(fileList, function (fileItem) {
+        return fileItem[urlProp] === url;
+      });
+      if (index > -1) {
+        rest.push($xeUpload.removeFileEvent(evnt, fileList[index], index).then(function (status) {
+          return {
+            url: url,
+            status: status
+          };
+        }));
+      }
+    }
+  });
+  return Promise.all(rest);
+}
+function createReactData() {
+  return {
+    isDragUploadStatus: false,
+    showMorePopup: false,
+    isActivated: false,
+    fileList: [],
+    fileCacheMaps: {},
+    isDragMove: false,
+    dragIndex: -1,
+    dragTipText: ''
+  };
+}
+function createInternalData() {
+  return {
+    moreId: _xeUtils.default.uniqueId('upload'),
+    imagePreviewTypes: ['jpg', 'jpeg', 'png', 'gif'],
+    prevDragIndex: -1
+    // prevDragPos: ''
+  };
+}
+var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defineVxeComponent)({
+  name: 'VxeUpload',
+  model: {
+    prop: 'value',
+    event: 'modelValue'
+  },
+  mixins: [_ui.globalMixins.sizeMixin],
+  props: {
+    value: [Array, String, Object],
+    showList: {
+      type: Boolean,
+      default: function _default() {
+        return (0, _ui.getConfig)().upload.showList;
+      }
+    },
+    moreConfig: Object,
+    readonly: {
+      type: Boolean,
+      default: null
+    },
+    disabled: {
+      type: Boolean,
+      default: null
+    },
+    autoSubmit: {
+      type: Boolean,
+      default: function _default() {
+        return (0, _ui.getConfig)().upload.autoSubmit;
+      }
+    },
+    mode: {
+      type: String,
+      default: function _default() {
+        return (0, _ui.getConfig)().upload.mode;
+      }
+    },
+    imageTypes: {
+      type: Array,
+      default: function _default() {
+        return _xeUtils.default.clone((0, _ui.getConfig)().upload.imageTypes, true);
+      }
+    },
+    imageConfig: {
+      type: Object,
+      default: function _default() {
+        return _xeUtils.default.clone((0, _ui.getConfig)().upload.imageConfig, true);
+      }
+    },
+    /**
+     * 已废弃，被 image-config 替换
+     * @deprecated
+     */
+    imageStyle: {
+      type: Object,
+      default: function _default() {
+        return _xeUtils.default.clone((0, _ui.getConfig)().upload.imageStyle, true);
+      }
+    },
+    fileTypes: {
+      type: Array,
+      default: function _default() {
+        return _xeUtils.default.clone((0, _ui.getConfig)().upload.fileTypes, true);
+      }
+    },
+    dragSort: Boolean,
+    dragToUpload: {
+      type: Boolean,
+      default: function _default() {
+        return _xeUtils.default.clone((0, _ui.getConfig)().upload.dragToUpload, true);
+      }
+    },
+    dragPlaceholder: {
+      type: String,
+      default: function _default() {
+        return (0, _ui.getConfig)().upload.dragPlaceholder;
+      }
+    },
+    pasteToUpload: {
+      type: Boolean,
+      default: function _default() {
+        return _xeUtils.default.clone((0, _ui.getConfig)().upload.pasteToUpload, true);
+      }
+    },
+    keyField: String,
+    singleMode: Boolean,
+    urlMode: Boolean,
+    urlArgs: {
+      type: Boolean,
+      default: function _default() {
+        return (0, _ui.getConfig)().upload.urlArgs;
+      }
+    },
+    multiple: Boolean,
+    limitSize: {
+      type: [String, Number],
+      default: function _default() {
+        return (0, _ui.getConfig)().upload.limitSize;
+      }
+    },
+    showLimitSize: {
+      type: Boolean,
+      default: function _default() {
+        return (0, _ui.getConfig)().upload.showLimitSize;
+      }
+    },
+    limitSizeText: {
+      type: [String, Number, Function],
+      default: function _default() {
+        return (0, _ui.getConfig)().upload.limitSizeText;
+      }
+    },
+    limitCount: {
+      type: [String, Number],
+      default: function _default() {
+        return (0, _ui.getConfig)().upload.limitCount;
+      }
+    },
+    showLimitCount: {
+      type: Boolean,
+      default: function _default() {
+        return (0, _ui.getConfig)().upload.showLimitCount;
+      }
+    },
+    limitCountText: {
+      type: [String, Number, Function],
+      default: function _default() {
+        return (0, _ui.getConfig)().upload.limitCountText;
+      }
+    },
+    nameField: {
+      type: String,
+      default: function _default() {
+        return (0, _ui.getConfig)().upload.nameField;
+      }
+    },
+    typeField: {
+      type: String,
+      default: function _default() {
+        return (0, _ui.getConfig)().upload.typeField;
+      }
+    },
+    urlField: {
+      type: String,
+      default: function _default() {
+        return (0, _ui.getConfig)().upload.urlField;
+      }
+    },
+    sizeField: {
+      type: String,
+      default: function _default() {
+        return (0, _ui.getConfig)().upload.sizeField;
+      }
+    },
+    showErrorStatus: {
+      type: Boolean,
+      default: function _default() {
+        return (0, _ui.getConfig)().upload.showErrorStatus;
+      }
+    },
+    showProgress: {
+      type: Boolean,
+      default: function _default() {
+        return (0, _ui.getConfig)().upload.showProgress;
+      }
+    },
+    progressText: {
+      type: [String, Number, Function],
+      default: function _default() {
+        return (0, _ui.getConfig)().upload.progressText;
+      }
+    },
+    previewImageConfig: Object,
+    showSubmitButton: Boolean,
+    autoHiddenButton: {
+      type: Boolean,
+      default: function _default() {
+        return (0, _ui.getConfig)().upload.autoHiddenButton;
+      }
+    },
+    showUploadButton: {
+      type: Boolean,
+      default: function _default() {
+        return (0, _ui.getConfig)().upload.showUploadButton;
+      }
+    },
+    buttonText: {
+      type: [String, Number, Function],
+      default: function _default() {
+        return (0, _ui.getConfig)().upload.buttonText;
+      }
+    },
+    buttonIcon: {
+      type: String,
+      default: function _default() {
+        return (0, _ui.getConfig)().upload.buttonIcon;
+      }
+    },
+    showButtonText: {
+      type: Boolean,
+      default: function _default() {
+        return (0, _ui.getConfig)().upload.showButtonText;
+      }
+    },
+    showButtonIcon: {
+      type: Boolean,
+      default: function _default() {
+        return (0, _ui.getConfig)().upload.showButtonIcon;
+      }
+    },
+    showRemoveButton: {
+      type: Boolean,
+      default: function _default() {
+        return (0, _ui.getConfig)().upload.showRemoveButton;
+      }
+    },
+    showDownloadButton: {
+      type: Boolean,
+      default: function _default() {
+        return (0, _ui.getConfig)().upload.showDownloadButton;
+      }
+    },
+    showPreview: {
+      type: Boolean,
+      default: function _default() {
+        return (0, _ui.getConfig)().upload.showPreview;
+      }
+    },
+    showTip: {
+      type: Boolean,
+      default: function _default() {
+        return (0, _ui.getConfig)().upload.showTip;
+      }
+    },
+    maxSimultaneousUploads: {
+      type: Number,
+      default: function _default() {
+        return (0, _ui.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: function _default() {
+        return (0, _ui.getConfig)().upload.size || (0, _ui.getConfig)().size;
+      }
+    }
+  },
+  inject: {
+    $xeForm: {
+      default: null
+    },
+    formItemInfo: {
+      from: 'xeFormItemInfo',
+      default: null
+    },
+    $xeTable: {
+      default: null
+    }
+  },
+  data: function data() {
+    var xID = _xeUtils.default.uniqueId();
+    var reactData = createReactData();
+    return Object.assign(Object.assign({}, {}), {
+      xID: xID,
+      reactData: reactData
+    });
+  },
+  computed: Object.assign(Object.assign({}, {}), {
+    computeFormReadonly: function computeFormReadonly() {
+      var $xeUpload = this;
+      var props = $xeUpload;
+      var $xeForm = $xeUpload.$xeForm;
+      var readonly = props.readonly;
+      if (readonly === null) {
+        if ($xeForm) {
+          return $xeForm.readonly;
+        }
+        return false;
+      }
+      return readonly;
+    },
+    computeIsDisabled: function computeIsDisabled() {
+      var $xeUpload = this;
+      var props = $xeUpload;
+      var $xeForm = $xeUpload.$xeForm;
+      var disabled = props.disabled;
+      if (disabled === null) {
+        if ($xeForm) {
+          return $xeForm.disabled;
+        }
+        return false;
+      }
+      return disabled;
+    },
+    computeKeyField: function computeKeyField() {
+      var $xeUpload = this;
+      var props = $xeUpload;
+      return props.keyField || '_X_KEY';
+    },
+    computeIsImage: function computeIsImage() {
+      var $xeUpload = this;
+      var props = $xeUpload;
+      return props.mode === 'image';
+    },
+    computeNameProp: function computeNameProp() {
+      var $xeUpload = this;
+      var props = $xeUpload;
+      return props.nameField || 'name';
+    },
+    computeTypeProp: function computeTypeProp() {
+      var $xeUpload = this;
+      var props = $xeUpload;
+      return props.typeField || 'type';
+    },
+    computeUrlProp: function computeUrlProp() {
+      var $xeUpload = this;
+      var props = $xeUpload;
+      return props.urlField || 'url';
+    },
+    computeSizeProp: function computeSizeProp() {
+      var $xeUpload = this;
+      var props = $xeUpload;
+      return props.sizeField || 'size';
+    },
+    computeLimitMaxSize: function computeLimitMaxSize() {
+      var $xeUpload = this;
+      var props = $xeUpload;
+      return _xeUtils.default.toNumber(props.limitSize) * 1024 * 1024;
+    },
+    computeLimitMaxCount: function computeLimitMaxCount() {
+      var $xeUpload = this;
+      var props = $xeUpload;
+      return props.multiple ? _xeUtils.default.toNumber(props.limitCount) : 1;
+    },
+    computePreviewImageOpts: function computePreviewImageOpts() {
+      var $xeUpload = this;
+      var props = $xeUpload;
+      var showDownloadButton = props.showDownloadButton;
+      return Object.assign({
+        showDownloadButton: showDownloadButton
+      }, (0, _ui.getConfig)().upload.previewImageConfig, props.previewImageConfig);
+    },
+    computeOverCount: function computeOverCount() {
+      var $xeUpload = this;
+      var props = $xeUpload;
+      var reactData = $xeUpload.reactData;
+      var multiple = props.multiple;
+      var fileList = reactData.fileList;
+      var limitMaxCount = $xeUpload.computeLimitMaxCount;
+      if (multiple) {
+        if (limitMaxCount) {
+          return fileList.length >= limitMaxCount;
+        }
+        return true;
+      }
+      return fileList.length >= 1;
+    },
+    computeLimitSizeUnit: function computeLimitSizeUnit() {
+      var $xeUpload = this;
+      var props = $xeUpload;
+      var limitSize = _xeUtils.default.toNumber(props.limitSize);
+      if (limitSize) {
+        if (limitSize > 1048576) {
+          return "".concat(limitSize / 1048576, "T");
+        }
+        if (limitSize > 1024) {
+          return "".concat(limitSize / 1024, "G");
+        }
+        return "".concat(limitSize, "M");
+      }
+      return '';
+    },
+    computedShowTipText: function computedShowTipText() {
+      var $xeUpload = this;
+      var props = $xeUpload;
+      var showTip = props.showTip,
+        tipText = props.tipText;
+      if (_xeUtils.default.isBoolean(showTip)) {
+        return showTip;
+      }
+      var defShowTip = (0, _ui.getConfig)().upload.showTip;
+      if (_xeUtils.default.isBoolean(defShowTip)) {
+        return defShowTip;
+      }
+      if (tipText) {
+        return true;
+      }
+      return false;
+    },
+    computedDefTipText: function computedDefTipText() {
+      var $xeUpload = this;
+      var props = $xeUpload;
+      var limitSize = props.limitSize,
+        fileTypes = props.fileTypes,
+        multiple = props.multiple,
+        limitCount = props.limitCount;
+      var tipText = props.tipText || props.hintText;
+      var isImage = $xeUpload.computeIsImage;
+      var limitSizeUnit = $xeUpload.computeLimitSizeUnit;
+      if (_xeUtils.default.isString(tipText)) {
+        return tipText;
+      }
+      if (_xeUtils.default.isFunction(tipText)) {
+        return "".concat(tipText({}));
+      }
+      var defTips = [];
+      if (isImage) {
+        if (multiple && limitCount) {
+          defTips.push((0, _ui.getI18n)('vxe.upload.imgCountHint', [limitCount]));
+        }
+        if (limitSize && limitSizeUnit) {
+          defTips.push((0, _ui.getI18n)('vxe.upload.imgSizeHint', [limitSizeUnit]));
+        }
+      } else {
+        if (fileTypes && fileTypes.length) {
+          defTips.push((0, _ui.getI18n)('vxe.upload.fileTypeHint', [fileTypes.join('/')]));
+        }
+        if (limitSize && limitSizeUnit) {
+          defTips.push((0, _ui.getI18n)('vxe.upload.fileSizeHint', [limitSizeUnit]));
+        }
+        if (multiple && limitCount) {
+          defTips.push((0, _ui.getI18n)('vxe.upload.fileCountHint', [limitCount]));
+        }
+      }
+      return defTips.join((0, _ui.getI18n)('vxe.base.comma'));
+    },
+    computeImageOpts: function computeImageOpts() {
+      var $xeUpload = this;
+      var props = $xeUpload;
+      return Object.assign({}, props.imageConfig || props.imageStyle);
+    },
+    computeImgStyle: function computeImgStyle() {
+      var $xeUpload = this;
+      var imageOpts = $xeUpload.computeImageOpts;
+      var width = imageOpts.width,
+        height = imageOpts.height;
+      var stys = {};
+      if (width) {
+        stys.width = (0, _dom.toCssUnit)(width);
+      }
+      if (height) {
+        stys.height = (0, _dom.toCssUnit)(height);
+      }
+      return stys;
+    },
+    computeMoreOpts: function computeMoreOpts() {
+      var $xeUpload = this;
+      var props = $xeUpload;
+      return Object.assign({
+        showMoreButton: true
+      }, props.moreConfig);
+    }
+  }),
+  watch: {
+    value: function value() {
+      var $xeUpload = this;
+      $xeUpload.updateFileList();
+    }
+  },
+  methods: {
+    //
+    // Method
+    //
+    dispatchEvent: function dispatchEvent(type, params, evnt) {
+      var $xeUpload = this;
+      $xeUpload.$emit(type, (0, _ui.createEvent)(evnt, {
+        $upload: $xeUpload
+      }, params));
+    },
+    emitModel: function emitModel(value) {
+      var $xeUpload = this;
+      var _events = $xeUpload._events;
+      if (_events && _events.modelValue) {
+        $xeUpload.$emit('modelValue', value);
+      } else {
+        $xeUpload.$emit('model-value', value);
+      }
+    },
+    choose: function choose() {
+      var $xeUpload = this;
+      return $xeUpload.handleChoose(null);
+    },
+    clear: function clear() {
+      var $xeUpload = this;
+      return handleClearFile($xeUpload, null);
+    },
+    clearByEvent: function clearByEvent(evnt) {
+      var $xeUpload = this;
+      return handleClearFile($xeUpload, evnt);
+    },
+    getPendingFiles: function getPendingFiles() {
+      var $xeUpload = this;
+      var reactData = $xeUpload.reactData;
+      var fileList = reactData.fileList,
+        fileCacheMaps = reactData.fileCacheMaps;
+      var pendingFiles = [];
+      fileList.forEach(function (item) {
+        var fileKey = $xeUpload.getFieldKey(item);
+        var cacheItem = fileCacheMaps[fileKey];
+        if (cacheItem && cacheItem.status === 'pending') {
+          pendingFiles.push(cacheItem.file);
+        }
+      });
+      return pendingFiles;
+    },
+    submit: function submit(isFull) {
+      var $xeUpload = this;
+      var props = $xeUpload;
+      var reactData = $xeUpload.reactData;
+      var maxSimultaneousUploads = props.maxSimultaneousUploads;
+      var msNum = _xeUtils.default.toNumber(maxSimultaneousUploads || 1) || 1;
+      var fileList = reactData.fileList,
+        fileCacheMaps = reactData.fileCacheMaps;
+      var allPendingList = fileList.filter(function (item) {
+        var fileKey = $xeUpload.getFieldKey(item);
+        var cacheItem = fileCacheMaps[fileKey];
+        return cacheItem && (cacheItem.status === 'pending' || isFull && cacheItem.status === 'error');
+      });
+      var handleSubmit = function handleSubmit(item) {
+        var fileKey = $xeUpload.getFieldKey(item);
+        var cacheItem = fileCacheMaps[fileKey];
+        if (cacheItem) {
+          var file = cacheItem.file;
+          if (file && (cacheItem.status === 'pending' || isFull && cacheItem.status === 'error')) {
+            cacheItem.loading = true;
+            cacheItem.percent = 0;
+            return $xeUpload.handleUploadResult(item, file).then(_handleNextSubmit);
+          }
+        }
+        return _handleNextSubmit();
+      };
+      var _handleNextSubmit = function handleNextSubmit() {
+        if (allPendingList.length) {
+          var 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(function () {
+        // 完成
+      });
+    },
+    getMoreVisible: function getMoreVisible() {
+      var $xeUpload = this;
+      var reactData = $xeUpload.reactData;
+      return reactData.showMorePopup;
+    },
+    openMore: function openMore() {
+      var $xeUpload = this;
+      $xeUpload.handleMoreEvent({
+        $event: new Event('click')
+      });
+      return $xeUpload.$nextTick();
+    },
+    openMoreByEvent: function openMoreByEvent(evnt) {
+      var $xeUpload = this;
+      $xeUpload.handleMoreEvent({
+        $event: evnt
+      });
+      return $xeUpload.$nextTick();
+    },
+    closeMore: function closeMore() {
+      var $xeUpload = this;
+      var internalData = $xeUpload.internalData;
+      if (_ui.VxeUI.modal) {
+        _ui.VxeUI.modal.close(internalData.moreId);
+      }
+      return $xeUpload.$nextTick();
+    },
+    remove: function remove(urlOrItem) {
+      var $xeUpload = this;
+      return handleRemoveFile($xeUpload, null, urlOrItem);
+    },
+    removeByEvent: function removeByEvent(evnt, urlOrItem) {
+      var $xeUpload = this;
+      return handleRemoveFile($xeUpload, evnt, urlOrItem);
+    },
+    getFieldKey: function getFieldKey(item) {
+      var $xeUpload = this;
+      var keyField = $xeUpload.computeKeyField;
+      return item[keyField];
+    },
+    updateFileList: function updateFileList() {
+      var $xeUpload = this;
+      var props = $xeUpload;
+      var reactData = $xeUpload.reactData;
+      var value = props.value,
+        multiple = props.multiple;
+      var formReadonly = $xeUpload.computeFormReadonly;
+      var keyField = $xeUpload.computeKeyField;
+      var nameProp = $xeUpload.computeNameProp;
+      var typeProp = $xeUpload.computeTypeProp;
+      var urlProp = $xeUpload.computeUrlProp;
+      var sizeProp = $xeUpload.computeSizeProp;
+      var fileList = value ? (value ? _xeUtils.default.isArray(value) ? value : [value] : []).map(function (item) {
+        if (!item || _xeUtils.default.isString(item)) {
+          var url = "".concat(item || '');
+          var urlObj = _xeUtils.default.parseUrl(item);
+          var _name = (urlObj ? urlObj.searchQuery[nameProp] : '') || $xeUpload.parseFileName(url);
+          return _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, nameProp, _name), typeProp, (urlObj ? urlObj.searchQuery[typeProp] : '') || $xeUpload.parseFileType(_name)), urlProp, url), sizeProp, _xeUtils.default.toNumber(urlObj ? urlObj.searchQuery[sizeProp] : 0) || 0), keyField, getUniqueKey());
+        }
+        var name = item[nameProp] || '';
+        item[nameProp] = name;
+        item[typeProp] = item[typeProp] || $xeUpload.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);
+    },
+    parseFileName: function parseFileName(url) {
+      return decodeURIComponent("".concat(url || '')).split('/').pop() || '';
+    },
+    parseFileType: function parseFileType(name) {
+      var index = name.lastIndexOf('.');
+      if (index > 0) {
+        return name.substring(index + 1).toLowerCase();
+      }
+      return '';
+    },
+    handleChangeEvent: function handleChangeEvent(evnt, vals) {
+      var $xeUpload = this;
+      var props = $xeUpload;
+      var singleMode = props.singleMode,
+        urlMode = props.urlMode,
+        urlArgs = props.urlArgs;
+      var urlProp = $xeUpload.computeUrlProp;
+      var nameProp = $xeUpload.computeNameProp;
+      var restList = vals ? vals.slice(0) : [];
+      if (urlMode) {
+        restList = restList.map(function (item) {
+          var url = item[urlProp];
+          if (url && urlArgs) {
+            var urlObj = _xeUtils.default.parseUrl(url);
+            if (!urlObj.searchQuery[nameProp]) {
+              if (url.indexOf('blob:') === -1) {
+                return "".concat(url).concat(url.indexOf('?') === -1 ? '?' : '&').concat(encodeURIComponent(item[nameProp] || ''));
+              }
+            }
+          }
+          return url;
+        });
+      }
+      var value = singleMode ? restList[0] || null : restList;
+      $xeUpload.emitModel(value);
+      $xeUpload.dispatchEvent('change', {
+        value: value
+      }, evnt);
+      return value;
+    },
+    getThumbnailFileUrl: function getThumbnailFileUrl(item) {
+      var $xeUpload = this;
+      var props = $xeUpload;
+      var getThumbnailUrlFn = props.getThumbnailUrlMethod || (0, _ui.getConfig)().upload.getThumbnailUrlMethod;
+      if (getThumbnailUrlFn) {
+        return getThumbnailUrlFn({
+          $upload: $xeUpload,
+          option: item
+        });
+      }
+      return $xeUpload.getFileUrl(item);
+    },
+    getFileUrl: function getFileUrl(item) {
+      var $xeUpload = this;
+      var props = $xeUpload;
+      var getUrlFn = props.getUrlMethod || (0, _ui.getConfig)().upload.getUrlMethod;
+      var urlProp = $xeUpload.computeUrlProp;
+      return getUrlFn ? getUrlFn({
+        $upload: $xeUpload,
+        option: item
+      }) : item[urlProp];
+    },
+    handleDefaultFilePreview: function handleDefaultFilePreview(item) {
+      var $xeUpload = this;
+      var props = $xeUpload;
+      var internalData = $xeUpload.internalData;
+      var imageTypes = props.imageTypes;
+      var typeProp = $xeUpload.computeTypeProp;
+      var previewImageOpts = $xeUpload.computePreviewImageOpts;
+      var beforeDownloadFn = props.beforeDownloadMethod || (0, _ui.getConfig)().upload.beforeDownloadMethod;
+      var imagePreviewTypes = internalData.imagePreviewTypes;
+      // 如果是预览图片
+      if (imagePreviewTypes.concat(imageTypes || []).some(function (type) {
+        return "".concat(type).toLowerCase() === "".concat(item[typeProp]).toLowerCase();
+      })) {
+        if (_ui.VxeUI.previewImage) {
+          _ui.VxeUI.previewImage(Object.assign(Object.assign({}, previewImageOpts), {
+            urlList: [$xeUpload.getFileUrl(item)],
+            beforeDownloadMethod: beforeDownloadFn ? function () {
+              return beforeDownloadFn({
+                $upload: $xeUpload,
+                option: item
+              });
+            } : undefined
+          }));
+        }
+      }
+    },
+    handlePreviewFileEvent: function handlePreviewFileEvent(evnt, item) {
+      var $xeUpload = this;
+      var props = $xeUpload;
+      var previewFn = props.previewMethod || (0, _ui.getConfig)().upload.previewMethod;
+      if (props.showPreview) {
+        if (previewFn) {
+          previewFn({
+            $upload: $xeUpload,
+            option: item
+          });
+        } else {
+          $xeUpload.handleDefaultFilePreview(item);
+        }
+      }
+    },
+    handlePreviewImageEvent: function handlePreviewImageEvent(evnt, item, index) {
+      var $xeUpload = this;
+      var props = $xeUpload;
+      var reactData = $xeUpload.reactData;
+      var fileList = reactData.fileList;
+      var previewImageOpts = $xeUpload.computePreviewImageOpts;
+      var previewFn = props.previewMethod || (0, _ui.getConfig)().upload.previewMethod;
+      var beforeDownloadFn = props.beforeDownloadMethod || (0, _ui.getConfig)().upload.beforeDownloadMethod;
+      if (props.showPreview) {
+        if (previewFn) {
+          previewFn({
+            $upload: $xeUpload,
+            option: item
+          });
+        } else if (_ui.VxeUI.previewImage) {
+          _ui.VxeUI.previewImage(Object.assign(Object.assign({}, previewImageOpts), {
+            urlList: fileList.map(function (item) {
+              return $xeUpload.getFileUrl(item);
+            }),
+            activeIndex: index,
+            beforeDownloadMethod: beforeDownloadFn ? function (_ref2) {
+              var index = _ref2.index;
+              return beforeDownloadFn({
+                $upload: $xeUpload,
+                option: fileList[index]
+              });
+            } : undefined
+          }));
+        }
+      }
+    },
+    handleUploadResult: function handleUploadResult(item, file) {
+      var $xeUpload = this;
+      var props = $xeUpload;
+      var reactData = $xeUpload.reactData;
+      var showErrorStatus = props.showErrorStatus;
+      var fileKey = $xeUpload.getFieldKey(item);
+      var uploadFn = props.uploadMethod || (0, _ui.getConfig)().upload.uploadMethod;
+      if (uploadFn) {
+        $xeUpload.dispatchEvent('upload-start', {
+          option: item
+        }, null);
+        return Promise.resolve(uploadFn({
+          $upload: $xeUpload,
+          file: file,
+          option: item,
+          updateProgress: function updateProgress(percentNum) {
+            var fileCacheMaps = reactData.fileCacheMaps;
+            var cacheItem = fileCacheMaps[$xeUpload.getFieldKey(item)];
+            if (cacheItem) {
+              cacheItem.percent = Math.max(0, Math.min(99, _xeUtils.default.toNumber(percentNum)));
+            }
+          }
+        })).then(function (res) {
+          var fileCacheMaps = reactData.fileCacheMaps;
+          var cacheItem = fileCacheMaps[fileKey];
+          if (cacheItem) {
+            cacheItem.percent = 100;
+            cacheItem.status = 'success';
+            cacheItem.response = res;
+          }
+          // 处理动态字段双向绑定问题
+          // Object.assign(item, res)
+          _xeUtils.default.each(res, function (val, key) {
+            $xeUpload.$set(item, key, val);
+          });
+          $xeUpload.dispatchEvent('upload-success', {
+            option: item,
+            data: res
+          }, null);
+        }).catch(function (res) {
+          var fileCacheMaps = reactData.fileCacheMaps;
+          var cacheItem = fileCacheMaps[fileKey];
+          if (cacheItem) {
+            cacheItem.status = 'error';
+            cacheItem.response = res;
+          }
+          if (showErrorStatus) {
+            // 处理动态字段双向绑定问题
+            // Object.assign(item, res)
+            _xeUtils.default.each(res, function (val, key) {
+              $xeUpload.$set(item, key, val);
+            });
+          } else {
+            reactData.fileList = reactData.fileList.filter(function (obj) {
+              return $xeUpload.getFieldKey(obj) !== fileKey;
+            });
+            delete fileCacheMaps[fileKey];
+          }
+          $xeUpload.dispatchEvent('upload-error', {
+            option: item,
+            data: res
+          }, null);
+        }).finally(function () {
+          var fileCacheMaps = reactData.fileCacheMaps;
+          var cacheItem = fileCacheMaps[fileKey];
+          if (cacheItem) {
+            cacheItem.loading = false;
+          }
+          var result = {
+            option: item,
+            status: cacheItem ? cacheItem.status : null,
+            response: cacheItem ? cacheItem.response : null
+          };
+          $xeUpload.dispatchEvent('upload-end', {
+            option: item,
+            result: result
+          }, null);
+        });
+      } else {
+        var fileCacheMaps = reactData.fileCacheMaps;
+        var cacheItem = fileCacheMaps[fileKey];
+        if (cacheItem) {
+          cacheItem.loading = false;
+        }
+      }
+      return Promise.resolve();
+    },
+    handleReUploadEvent: function handleReUploadEvent(evnt, item) {
+      var $xeUpload = this;
+      var props = $xeUpload;
+      var reactData = $xeUpload.reactData;
+      var uploadMethod = props.uploadMethod,
+        urlMode = props.urlMode;
+      var fileCacheMaps = reactData.fileCacheMaps;
+      var fileKey = $xeUpload.getFieldKey(item);
+      var cacheItem = fileCacheMaps[fileKey];
+      var uploadFn = uploadMethod || (0, _ui.getConfig)().upload.uploadMethod;
+      if (uploadFn && cacheItem) {
+        var file = cacheItem.file;
+        cacheItem.loading = true;
+        cacheItem.status = 'pending';
+        cacheItem.percent = 0;
+        $xeUpload.handleUploadResult(item, file).then(function () {
+          if (urlMode) {
+            $xeUpload.handleChangeEvent(evnt, reactData.fileList);
+          }
+        });
+      }
+    },
+    handleUploadFile: function handleUploadFile(files, evnt) {
+      var $xeUpload = this;
+      var props = $xeUpload;
+      var reactData = $xeUpload.reactData;
+      var $xeForm = $xeUpload.$xeForm;
+      var formItemInfo = $xeUpload.formItemInfo;
+      var multiple = props.multiple,
+        showLimitSize = props.showLimitSize,
+        limitSizeText = props.limitSizeText,
+        showLimitCount = props.showLimitCount,
+        limitCountText = props.limitCountText,
+        autoSubmit = props.autoSubmit;
+      var fileList = reactData.fileList;
+      var beforeSelectFn = props.beforeSelectMethod || (0, _ui.getConfig)().upload.beforeSelectMethod;
+      var uploadFn = props.uploadMethod || (0, _ui.getConfig)().upload.uploadMethod;
+      var keyField = $xeUpload.computeKeyField;
+      var nameProp = $xeUpload.computeNameProp;
+      var typeProp = $xeUpload.computeTypeProp;
+      var urlProp = $xeUpload.computeUrlProp;
+      var sizeProp = $xeUpload.computeSizeProp;
+      var limitMaxSize = $xeUpload.computeLimitMaxSize;
+      var limitMaxCount = $xeUpload.computeLimitMaxCount;
+      var limitSizeUnit = $xeUpload.computeLimitSizeUnit;
+      var selectFiles = files;
+      if (multiple && limitMaxCount) {
+        // 校验文件数量
+        if (showLimitCount && fileList.length >= limitMaxCount) {
+          if (_ui.VxeUI.modal) {
+            _ui.VxeUI.modal.notification({
+              title: (0, _ui.getI18n)('vxe.modal.errTitle'),
+              status: 'error',
+              content: limitCountText ? "".concat(_xeUtils.default.isFunction(limitCountText) ? limitCountText({
+                maxCount: limitMaxCount
+              }) : limitCountText) : (0, _ui.getI18n)('vxe.upload.overCountErr', [limitMaxCount])
+            });
+          }
+          return;
+        }
+        var overNum = selectFiles.length - (limitMaxCount - fileList.length);
+        if (showLimitCount && overNum > 0) {
+          var overExtraList = selectFiles.slice(limitMaxCount - fileList.length);
+          if (limitCountText) {
+            _ui.VxeUI.modal.notification({
+              title: (0, _ui.getI18n)('vxe.modal.errTitle'),
+              status: 'error',
+              content: "".concat(_xeUtils.default.isFunction(limitCountText) ? limitCountText({
+                maxCount: limitMaxCount
+              }) : limitCountText)
+            });
+          } else if (_ui.VxeUI.modal) {
+            _ui.VxeUI.modal.notification({
+              title: (0, _ui.getI18n)('vxe.modal.errTitle'),
+              status: 'error',
+              slots: {
+                default: function _default(params, h) {
+                  return h('div', {
+                    class: 'vxe-upload--file-message-over-error'
+                  }, [h('div', {}, (0, _ui.getI18n)('vxe.upload.overCountExtraErr', [limitMaxCount, overNum])), h('div', {
+                    class: 'vxe-upload--file-message-over-extra'
+                  }, overExtraList.map(function (file, index) {
+                    return h('div', {
+                      key: index,
+                      class: 'vxe-upload--file-message-over-extra-item'
+                    }, file.name);
+                  }))]);
+                }
+              }
+            });
+          }
+        }
+        selectFiles = selectFiles.slice(0, limitMaxCount - fileList.length);
+      }
+      // 校验文件大小
+      if (showLimitSize && limitMaxSize) {
+        for (var i = 0; i < files.length; i++) {
+          var file = files[0];
+          if (file.size > limitMaxSize) {
+            if (_ui.VxeUI.modal) {
+              _ui.VxeUI.modal.notification({
+                title: (0, _ui.getI18n)('vxe.modal.errTitle'),
+                status: 'error',
+                content: limitSizeText ? "".concat(_xeUtils.default.isFunction(limitSizeText) ? limitSizeText({
+                  maxSize: limitMaxSize
+                }) : limitSizeText) : (0, _ui.getI18n)('vxe.upload.overSizeErr', [limitSizeUnit])
+              });
+            }
+            return;
+          }
+        }
+      }
+      $xeUpload.dispatchEvent('upload-queue-start', {
+        files: selectFiles
+      }, evnt);
+      var cacheMaps = Object.assign({}, reactData.fileCacheMaps);
+      var uploadFileList = multiple ? fileList : [];
+      var newFileList = [];
+      var uploadPromiseRests = [];
+      selectFiles.forEach(function (file) {
+        var name = file.name;
+        var fileKey = getUniqueKey();
+        var fileObj = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, nameProp, name), typeProp, $xeUpload.parseFileType(name)), sizeProp, file.size), urlProp, URL.createObjectURL(file)), keyField, fileKey);
+        if (uploadFn) {
+          cacheMaps[fileKey] = {
+            file: file,
+            loading: !!autoSubmit,
+            status: 'pending',
+            percent: 0,
+            response: null
+          };
+        }
+        var item = fileObj;
+        if (!beforeSelectFn || beforeSelectFn({
+          $upload: $xeUpload,
+          file: file
+        })) {
+          if (uploadFn && autoSubmit) {
+            uploadPromiseRests.push($xeUpload.handleUploadResult(item, file));
+          }
+          newFileList.push(item);
+          uploadFileList.push(item);
+        }
+      });
+      reactData.fileList = uploadFileList;
+      reactData.fileCacheMaps = cacheMaps;
+      uploadFileList.forEach(function (item) {
+        $xeUpload.dispatchEvent('add', {
+          option: item
+        }, evnt);
+      });
+      Promise.all(uploadPromiseRests).then(function () {
+        var fileCacheMaps = reactData.fileCacheMaps;
+        var restFileList = reactData.fileList;
+        var uploadResults = newFileList.map(function (option) {
+          var fileKey = $xeUpload.getFieldKey(option);
+          var cacheItem = fileCacheMaps[fileKey];
+          return {
+            option: option,
+            status: cacheItem ? cacheItem.status : null,
+            response: cacheItem ? cacheItem.response : null
+          };
+        });
+        var value = $xeUpload.handleChangeEvent(evnt, restFileList);
+        $xeUpload.dispatchEvent('upload-queue-end', {
+          value: value,
+          options: restFileList,
+          results: uploadResults,
+          files: selectFiles
+        }, evnt);
+        // 自动更新校验状态
+        if ($xeForm && formItemInfo) {
+          $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, value);
+        }
+      });
+    },
+    handleChoose: function handleChoose(evnt) {
+      var $xeUpload = this;
+      var props = $xeUpload;
+      var multiple = props.multiple,
+        imageTypes = props.imageTypes,
+        fileTypes = props.fileTypes;
+      var isDisabled = $xeUpload.computeIsDisabled;
+      var isImage = $xeUpload.computeIsImage;
+      if (isDisabled) {
+        return Promise.resolve({
+          status: false,
+          files: [],
+          file: null
+        });
+      }
+      return (0, _util.readLocalFile)({
+        multiple: multiple,
+        types: isImage ? imageTypes : fileTypes
+      }).then(function (params) {
+        $xeUpload.handleUploadFile(params.files, evnt);
+        return params;
+      });
+    },
+    clickEvent: function clickEvent(evnt) {
+      var $xeUpload = this;
+      $xeUpload.handleChoose(evnt).catch(function () {
+        // 错误文件类型
+      });
+    },
+    handleRemoveEvent: function handleRemoveEvent(evnt, item, index) {
+      var $xeUpload = this;
+      var reactData = $xeUpload.reactData;
+      var $xeForm = $xeUpload.$xeForm;
+      var formItemInfo = $xeUpload.formItemInfo;
+      var fileList = reactData.fileList;
+      fileList.splice(index, 1);
+      $xeUpload.handleChangeEvent(evnt, fileList);
+      // 自动更新校验状态
+      if ($xeForm && formItemInfo) {
+        $xeForm.triggerItemEvent(evnt || {
+          type: 'remove'
+        }, formItemInfo.itemConfig.field, fileList);
+      }
+      if (evnt) {
+        $xeUpload.dispatchEvent('remove', {
+          option: item
+        }, evnt);
+      }
+    },
+    removeFileEvent: function removeFileEvent(evnt, item, index) {
+      var $xeUpload = this;
+      var props = $xeUpload;
+      var beforeRemoveFn = props.beforeRemoveMethod || (0, _ui.getConfig)().upload.beforeRemoveMethod;
+      var removeFn = props.removeMethod || (0, _ui.getConfig)().upload.removeMethod;
+      return Promise.resolve(beforeRemoveFn ? beforeRemoveFn({
+        $upload: $xeUpload,
+        option: item
+      }) : true).then(function (status) {
+        if (status) {
+          if (removeFn) {
+            Promise.resolve(removeFn({
+              $upload: $xeUpload,
+              option: item
+            })).then(function () {
+              $xeUpload.handleRemoveEvent(evnt, item, index);
+            }).catch(function (e) {
+              return e;
+            });
+          } else {
+            $xeUpload.handleRemoveEvent(evnt, item, index);
+          }
+        } else {
+          $xeUpload.dispatchEvent('remove-fail', {
+            option: item
+          }, evnt);
+        }
+        return status;
+      });
+    },
+    handleDownloadEvent: function handleDownloadEvent(evnt, item) {
+      var $xeUpload = this;
+      $xeUpload.dispatchEvent('download', {
+        option: item
+      }, evnt);
+    },
+    downloadFileEvent: function downloadFileEvent(evnt, item) {
+      var $xeUpload = this;
+      var props = $xeUpload;
+      var beforeDownloadFn = props.beforeDownloadMethod || (0, _ui.getConfig)().upload.beforeDownloadMethod;
+      var downloadFn = props.downloadMethod || (0, _ui.getConfig)().upload.downloadMethod;
+      Promise.resolve(beforeDownloadFn ? beforeDownloadFn({
+        $upload: $xeUpload,
+        option: item
+      }) : true).then(function (status) {
+        if (status) {
+          if (downloadFn) {
+            Promise.resolve(downloadFn({
+              $upload: $xeUpload,
+              option: item
+            })).then(function () {
+              $xeUpload.handleDownloadEvent(evnt, item);
+            }).catch(function (e) {
+              return e;
+            });
+          } else {
+            $xeUpload.handleDownloadEvent(evnt, item);
+          }
+        } else {
+          $xeUpload.dispatchEvent('download-fail', {
+            option: item
+          }, evnt);
+        }
+      });
+    },
+    handleUploadDragleaveEvent: function handleUploadDragleaveEvent(evnt) {
+      var $xeUpload = this;
+      var reactData = $xeUpload.reactData;
+      var targetElem = evnt.currentTarget;
+      var clientX = evnt.clientX,
+        clientY = evnt.clientY;
+      if (targetElem) {
+        var _targetElem$getBoundi = targetElem.getBoundingClientRect(),
+          targetX = _targetElem$getBoundi.x,
+          targetY = _targetElem$getBoundi.y,
+          targetHeight = _targetElem$getBoundi.height,
+          targetWidth = _targetElem$getBoundi.width;
+        if (clientX < targetX || clientX > targetX + targetWidth || clientY < targetY || clientY > targetY + targetHeight) {
+          reactData.isDragUploadStatus = false;
+        }
+      }
+    },
+    handleUploadDragoverEvent: function handleUploadDragoverEvent(evnt) {
+      var $xeUpload = this;
+      var reactData = $xeUpload.reactData;
+      var dataTransfer = evnt.dataTransfer;
+      if (dataTransfer) {
+        var items = dataTransfer.items;
+        if (items && items.length) {
+          evnt.preventDefault();
+          reactData.isDragUploadStatus = true;
+        }
+      }
+    },
+    uploadTransferFileEvent: function uploadTransferFileEvent(evnt, files) {
+      var $xeUpload = this;
+      var props = $xeUpload;
+      var internalData = $xeUpload.internalData;
+      var imageTypes = props.imageTypes,
+        fileTypes = props.fileTypes;
+      var imagePreviewTypes = internalData.imagePreviewTypes;
+      var isImage = $xeUpload.computeIsImage;
+      if (isImage) {
+        var pasteImgTypes = imagePreviewTypes.concat(imageTypes && imageTypes.length ? imageTypes : []);
+        files = files.filter(function (file) {
+          var fileType = "".concat(file.type.split('/')[1] || '').toLowerCase();
+          if (pasteImgTypes.some(function (type) {
+            return "".concat(type).toLowerCase() === fileType;
+          })) {
+            return true;
+          }
+          return false;
+        });
+      } else {
+        if (fileTypes && fileTypes.length) {
+          var errTypes = [];
+          files.forEach(function (file) {
+            var fileType = $xeUpload.parseFileType(file.name);
+            if (!fileTypes.some(function (type) {
+              return "".concat(type).toLowerCase() === fileType;
+            })) {
+              errTypes.push(fileType);
+            }
+          });
+          if (errTypes.length) {
+            if (_ui.VxeUI.modal) {
+              _ui.VxeUI.modal.message({
+                content: (0, _ui.getI18n)('vxe.error.notType', [errTypes.join(', ')]),
+                status: 'error'
+              });
+            }
+            return;
+          }
+        }
+      }
+      // 如果全部不满足条件
+      if (!files.length) {
+        if (_ui.VxeUI.modal) {
+          _ui.VxeUI.modal.notification({
+            title: (0, _ui.getI18n)('vxe.modal.errTitle'),
+            status: 'error',
+            content: (0, _ui.getI18n)('vxe.upload.uploadTypeErr')
+          });
+        }
+        return;
+      }
+      $xeUpload.handleUploadFile(files, evnt);
+    },
+    handleUploadDropEvent: function handleUploadDropEvent(evnt) {
+      var $xeUpload = this;
+      var reactData = $xeUpload.reactData;
+      var dataTransfer = evnt.dataTransfer;
+      if (dataTransfer) {
+        var items = dataTransfer.items;
+        if (items && items.length) {
+          evnt.preventDefault();
+          var files = handleTransferFiles(items);
+          if (files.length) {
+            $xeUpload.uploadTransferFileEvent(evnt, files);
+          }
+        }
+      }
+      reactData.isDragUploadStatus = false;
+    },
+    handleMoreEvent: function handleMoreEvent(evntParams) {
+      var $xeUpload = this;
+      var props = $xeUpload;
+      var slots = $xeUpload.$scopedSlots;
+      var reactData = $xeUpload.reactData;
+      var internalData = $xeUpload.internalData;
+      var xID = $xeUpload.xID;
+      var formReadonly = $xeUpload.computeFormReadonly;
+      var isImage = $xeUpload.computeIsImage;
+      var evnt = evntParams.$event;
+      if (_ui.VxeUI.modal) {
+        _ui.VxeUI.modal.open({
+          id: internalData.moreId,
+          title: formReadonly ? (0, _ui.getI18n)('vxe.upload.morePopup.readTitle') : (0, _ui.getI18n)("vxe.upload.morePopup.".concat(isImage ? 'imageTitle' : 'fileTitle')),
+          width: 660,
+          height: 500,
+          escClosable: true,
+          showMaximize: true,
+          resize: true,
+          maskClosable: true,
+          slots: {
+            default: function _default(params, h) {
+              var showErrorStatus = props.showErrorStatus,
+                dragToUpload = props.dragToUpload,
+                dragSort = props.dragSort,
+                dragPlaceholder = props.dragPlaceholder;
+              var isActivated = reactData.isActivated,
+                isDragMove = reactData.isDragMove,
+                isDragUploadStatus = reactData.isDragUploadStatus,
+                dragIndex = reactData.dragIndex;
+              var fileList = reactData.fileList;
+              var isDisabled = $xeUpload.computeIsDisabled;
+              var moreContSlot = slots.moreContent || slots['more-content'];
+              var ons = {};
+              if (dragToUpload && dragIndex === -1) {
+                ons.dragover = $xeUpload.handleUploadDragoverEvent;
+                ons.dragleave = $xeUpload.handleUploadDragleaveEvent;
+                ons.drop = $xeUpload.handleUploadDropEvent;
+              }
+              return h('div', {
+                attrs: {
+                  id: "refPopupElem".concat(xID)
+                },
+                class: ['vxe-upload--more-popup', {
+                  'is--readonly': formReadonly,
+                  'is--disabled': isDisabled,
+                  'is--active': isActivated,
+                  'show--error': showErrorStatus,
+                  'is--drag': isDragUploadStatus
+                }],
+                on: ons
+              }, moreContSlot ? (0, _vn.getSlotVNs)(moreContSlot({
+                options: fileList
+              })) : [isImage ? dragSort ? h('transition-group', {
+                props: {
+                  name: "vxe-upload--drag-list".concat(isDragMove ? '' : '-disabled'),
+                  tag: 'div'
+                },
+                class: 'vxe-upload--image-more-list'
+              }, $xeUpload.renderImageItemList(h, fileList, true).concat($xeUpload.renderImageAction(h, true))) : h('div', {
+                class: 'vxe-upload--image-more-list'
+              }, $xeUpload.renderImageItemList(h, fileList, true).concat($xeUpload.renderImageAction(h, true))) : h('div', {
+                class: 'vxe-upload--file-more-list'
+              }, [$xeUpload.renderFileAction(h, true), dragSort ? h('transition-group', {
+                props: {
+                  name: "vxe-upload--drag-list".concat(isDragMove ? '' : '-disabled'),
+                  tag: 'div'
+                },
+                class: 'vxe-upload--file-list'
+              }, $xeUpload.renderFileItemList(h, fileList, true)) : h('div', {
+                class: 'vxe-upload--file-list'
+              }, $xeUpload.renderFileItemList(h, fileList, true))]), dragSort ? h('div', {
+                attrs: {
+                  id: "refModalDragLineElem".concat(xID)
+                },
+                class: 'vxe-upload--drag-line'
+              }) : (0, _ui.renderEmptyElement)($xeUpload), isDragUploadStatus ? h('div', {
+                class: 'vxe-upload--drag-placeholder'
+              }, dragPlaceholder || (0, _ui.getI18n)('vxe.upload.dragPlaceholder')) : (0, _ui.renderEmptyElement)($xeUpload)]);
+            }
+          },
+          events: {
+            show: function show() {
+              reactData.showMorePopup = true;
+            },
+            hide: function hide(_ref3) {
+              var $event = _ref3.$event;
+              reactData.showMorePopup = false;
+              if ($event) {
+                $xeUpload.dispatchEvent('more-visible', {
+                  visible: false
+                }, $event);
+              }
+            }
+          }
+        });
+        if (evnt) {
+          $xeUpload.dispatchEvent('more-visible', {
+            visible: true
+          }, evnt);
+        }
+      }
+    },
+    // 拖拽
+    handleDragSortDragstartEvent: function handleDragSortDragstartEvent(evnt) {
+      var $xeUpload = this;
+      var reactData = $xeUpload.reactData;
+      evnt.stopPropagation();
+      if (evnt.dataTransfer) {
+        evnt.dataTransfer.setDragImage((0, _dom.getTpImg)(), 0, 0);
+      }
+      var dragEl = evnt.currentTarget;
+      var parentEl = dragEl.parentElement;
+      var dragIndex = _xeUtils.default.findIndexOf(Array.from(parentEl.children), function (item) {
+        return dragEl === item;
+      });
+      reactData.isDragMove = true;
+      reactData.dragIndex = dragIndex;
+      setTimeout(function () {
+        reactData.isDragMove = false;
+      }, 500);
+    },
+    handleDragSortDragoverEvent: function handleDragSortDragoverEvent(evnt) {
+      var $xeUpload = this;
+      var reactData = $xeUpload.reactData;
+      var internalData = $xeUpload.internalData;
+      evnt.stopPropagation();
+      evnt.preventDefault();
+      var dragIndex = reactData.dragIndex;
+      if (dragIndex === -1) {
+        return;
+      }
+      var isImage = $xeUpload.computeIsImage;
+      var dragEl = evnt.currentTarget;
+      var parentEl = dragEl.parentElement;
+      var currIndex = _xeUtils.default.findIndexOf(Array.from(parentEl.children), function (item) {
+        return dragEl === item;
+      });
+      var dragPos = '';
+      if (isImage) {
+        var offsetX = evnt.clientX - dragEl.getBoundingClientRect().x;
+        dragPos = offsetX < dragEl.clientWidth / 2 ? 'left' : 'right';
+      } else {
+        var offsetY = evnt.clientY - dragEl.getBoundingClientRect().y;
+        dragPos = offsetY < dragEl.clientHeight / 2 ? 'top' : 'bottom';
+      }
+      if (dragIndex === currIndex) {
+        showDropTip($xeUpload, evnt, dragEl, dragPos);
+        return;
+      }
+      showDropTip($xeUpload, evnt, dragEl, dragPos);
+      internalData.prevDragIndex = currIndex;
+      internalData.prevDragPos = dragPos;
+    },
+    handleDragSortDragendEvent: function handleDragSortDragendEvent(evnt) {
+      var $xeUpload = this;
+      var reactData = $xeUpload.reactData;
+      var internalData = $xeUpload.internalData;
+      var fileList = reactData.fileList,
+        dragIndex = reactData.dragIndex;
+      var prevDragIndex = internalData.prevDragIndex,
+        prevDragPos = internalData.prevDragPos;
+      var oldIndex = dragIndex;
+      var targetIndex = prevDragIndex;
+      var dragOffsetIndex = prevDragPos === 'bottom' || prevDragPos === 'right' ? 1 : 0;
+      var oldItem = fileList[oldIndex];
+      var newItem = fileList[targetIndex];
+      if (oldItem && newItem) {
+        fileList.splice(oldIndex, 1);
+        var ptfIndex = _xeUtils.default.findIndexOf(fileList, function (item) {
+          return newItem === item;
+        });
+        var nIndex = ptfIndex + dragOffsetIndex;
+        fileList.splice(nIndex, 0, oldItem);
+        $xeUpload.dispatchEvent('sort-dragend', {
+          oldItem: oldItem,
+          newItem: newItem,
+          dragPos: prevDragPos,
+          offsetIndex: dragOffsetIndex,
+          _index: {
+            newIndex: nIndex,
+            oldIndex: oldIndex
+          }
+        }, evnt);
+      }
+      hideDropTip($xeUpload);
+      reactData.dragIndex = -1;
+    },
+    handleItemMousedownEvent: function handleItemMousedownEvent(evnt) {
+      var $xeUpload = this;
+      var $xeTable = $xeUpload.$xeTable;
+      var reactData = $xeUpload.reactData;
+      if ($xeTable) {
+        evnt.stopPropagation();
+      }
+      reactData.isActivated = true;
+    },
+    handleGlobalPasteEvent: function handleGlobalPasteEvent(evnt) {
+      var $xeUpload = this;
+      var props = $xeUpload;
+      var reactData = $xeUpload.reactData;
+      var pasteToUpload = props.pasteToUpload;
+      var isActivated = reactData.isActivated;
+      if (!isActivated || !pasteToUpload) {
+        return;
+      }
+      var clipboardData = evnt.clipboardData || evnt.originalEvent.clipboardData;
+      if (!clipboardData) {
+        return;
+      }
+      var items = clipboardData.items;
+      if (!items) {
+        return;
+      }
+      var files = handleTransferFiles(items);
+      if (files.length) {
+        evnt.preventDefault();
+        $xeUpload.uploadTransferFileEvent(evnt, files);
+      }
+    },
+    handleGlobalClickEvent: function handleGlobalClickEvent(evnt) {
+      var $xeUpload = this;
+      var reactData = $xeUpload.reactData;
+      var el = $xeUpload.$refs.refElem;
+      var popupEl = $xeUpload.$refs.refPopupElem;
+      var isActivated = (0, _dom.getEventTargetNode)(evnt, el).flag;
+      if (!isActivated && popupEl) {
+        var parentEl = popupEl.parentElement || popupEl;
+        var modalEl = parentEl ? parentEl.parentElement : parentEl;
+        isActivated = (0, _dom.getEventTargetNode)(evnt, modalEl).flag;
+      }
+      reactData.isActivated = isActivated;
+    },
+    handleGlobalBlurEvent: function handleGlobalBlurEvent() {
+      var $xeUpload = this;
+      var reactData = $xeUpload.reactData;
+      reactData.isActivated = false;
+    },
+    //
+    // Render
+    //
+    renderFileItemList: function renderFileItemList(h, currList, isMoreView) {
+      var $xeUpload = this;
+      var props = $xeUpload;
+      var slots = $xeUpload.$scopedSlots;
+      var reactData = $xeUpload.reactData;
+      var showRemoveButton = props.showRemoveButton,
+        showDownloadButton = props.showDownloadButton,
+        showProgress = props.showProgress,
+        progressText = props.progressText,
+        showPreview = props.showPreview,
+        showErrorStatus = props.showErrorStatus,
+        dragSort = props.dragSort,
+        autoSubmit = props.autoSubmit,
+        showSubmitButton = props.showSubmitButton;
+      var fileList = reactData.fileList,
+        fileCacheMaps = reactData.fileCacheMaps;
+      var isDisabled = $xeUpload.computeIsDisabled;
+      var formReadonly = $xeUpload.computeFormReadonly;
+      var nameProp = $xeUpload.computeNameProp;
+      var typeProp = $xeUpload.computeTypeProp;
+      var optionSlot = slots.option;
+      var actionSlot = slots.action;
+      var cornerSlot = slots.corner;
+      var nameSlot = slots.name;
+      var ons = {};
+      if (dragSort && currList.length > 1) {
+        ons.dragstart = $xeUpload.handleDragSortDragstartEvent;
+        ons.dragover = $xeUpload.handleDragSortDragoverEvent;
+        ons.dragend = $xeUpload.handleDragSortDragendEvent;
+      }
+      return currList.map(function (item, index) {
+        var fileKey = $xeUpload.getFieldKey(item);
+        var cacheItem = fileCacheMaps[fileKey];
+        var isLoading = false;
+        var isError = false;
+        var isPending = false;
+        var fileName = "".concat(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
+          }],
+          attrs: {
+            fileid: fileKey,
+            draggable: dragSort ? true : null
+          },
+          on: ons
+        }, optionSlot ? (0, _vn.getSlotVNs)(optionSlot({
+          option: item,
+          isMoreView: isMoreView,
+          options: fileList
+        })) : [h('div', {
+          class: 'vxe-upload--file-item-icon'
+        }, [h('i', {
+          class: (0, _ui.getIcon)()["UPLOAD_FILE_TYPE_".concat("".concat(item[typeProp]).toLocaleUpperCase())] || (0, _ui.getIcon)().UPLOAD_FILE_TYPE_DEFAULT
+        })]), h('div', {
+          class: 'vxe-upload--file-item-name',
+          attrs: {
+            title: fileName
+          },
+          on: {
+            click: function click(evnt) {
+              if (!isLoading && !isError) {
+                $xeUpload.handlePreviewFileEvent(evnt, item);
+              }
+            }
+          }
+        }, nameSlot ? (0, _vn.getSlotVNs)(nameSlot({
+          option: item,
+          isMoreView: isMoreView,
+          options: fileList
+        })) : fileName), isLoading ? h('div', {
+          class: 'vxe-upload--file-item-loading-icon'
+        }, [h('i', {
+          class: (0, _ui.getIcon)().UPLOAD_LOADING
+        })]) : (0, _ui.renderEmptyElement)($xeUpload), showProgress && isLoading && cacheItem ? h('div', {
+          class: 'vxe-upload--file-item-loading-text'
+        }, progressText ? _xeUtils.default.toFormatString("".concat(_xeUtils.default.isFunction(progressText) ? progressText({}) : progressText), {
+          percent: cacheItem.percent
+        }) : (0, _ui.getI18n)('vxe.upload.uploadProgress', [cacheItem.percent])) : (0, _ui.renderEmptyElement)($xeUpload), !isLoading && (isError && showErrorStatus || isPending && showSubmitButton && !autoSubmit) ? h('div', {
+          class: 'vxe-upload--file-item-rebtn'
+        }, [h(_button.default, {
+          props: {
+            icon: isError ? (0, _ui.getIcon)().UPLOAD_IMAGE_RE_UPLOAD : (0, _ui.getIcon)().UPLOAD_IMAGE_UPLOAD,
+            mode: 'text',
+            status: 'primary',
+            content: isError ? (0, _ui.getI18n)('vxe.upload.reUpload') : (0, _ui.getI18n)('vxe.upload.manualUpload')
+          },
+          on: {
+            click: function click(evnt) {
+              $xeUpload.handleReUploadEvent(evnt, item);
+            }
+          }
+        })]) : (0, _ui.renderEmptyElement)($xeUpload), h('div', {
+          class: 'vxe-upload--file-item-btn-wrapper'
+        }, actionSlot ? (0, _vn.getSlotVNs)(actionSlot({
+          option: item,
+          isMoreView: isMoreView,
+          options: fileList,
+          readonly: formReadonly
+        })) : [cornerSlot ? h('div', {
+          class: 'vxe-upload--file-item-action'
+        }, (0, _vn.getSlotVNs)(cornerSlot({
+          option: item,
+          isMoreView: isMoreView,
+          options: fileList,
+          readonly: formReadonly
+        }))) : (0, _ui.renderEmptyElement)($xeUpload), showDownloadButton && !isLoading ? h('div', {
+          class: 'vxe-upload--file-item-download-btn',
+          on: {
+            click: function click(evnt) {
+              $xeUpload.downloadFileEvent(evnt, item);
+            }
+          }
+        }, [h('i', {
+          class: (0, _ui.getIcon)().UPLOAD_FILE_DOWNLOAD
+        })]) : (0, _ui.renderEmptyElement)($xeUpload), showRemoveButton && !formReadonly && !isDisabled && !isLoading ? h('div', {
+          class: 'vxe-upload--file-item-remove-btn',
+          on: {
+            click: function click(evnt) {
+              $xeUpload.removeFileEvent(evnt, item, index);
+            }
+          }
+        }, [h('i', {
+          class: (0, _ui.getIcon)().UPLOAD_FILE_REMOVE
+        })]) : (0, _ui.renderEmptyElement)($xeUpload)])]);
+      });
+    },
+    renderFileAction: function renderFileAction(h, isMoreView) {
+      var $xeUpload = this;
+      var props = $xeUpload;
+      var slots = $xeUpload.$scopedSlots;
+      var reactData = $xeUpload.reactData;
+      var showUploadButton = props.showUploadButton,
+        buttonText = props.buttonText,
+        buttonIcon = props.buttonIcon,
+        showButtonText = props.showButtonText,
+        showButtonIcon = props.showButtonIcon,
+        autoHiddenButton = props.autoHiddenButton;
+      var fileList = reactData.fileList;
+      var isDisabled = $xeUpload.computeIsDisabled;
+      var formReadonly = $xeUpload.computeFormReadonly;
+      var showTipText = $xeUpload.computedShowTipText;
+      var defTipText = $xeUpload.computedDefTipText;
+      var overCount = $xeUpload.computeOverCount;
+      var defaultSlot = slots.default;
+      var tipSlot = slots.tip || slots.hint;
+      if (formReadonly || !showUploadButton) {
+        return (0, _ui.renderEmptyElement)($xeUpload);
+      }
+      return h('div', {
+        class: 'vxe-upload--file-action'
+      }, [autoHiddenButton && overCount ? (0, _ui.renderEmptyElement)($xeUpload) : h('div', {
+        class: 'vxe-upload--file-action-btn',
+        on: {
+          click: $xeUpload.clickEvent
+        }
+      }, defaultSlot ? (0, _vn.getSlotVNs)(defaultSlot({
+        isMoreView: isMoreView,
+        options: fileList,
+        $upload: $xeUpload
+      })) : [h(_button.default, {
+        class: 'vxe-upload--file-action-button',
+        props: {
+          content: isMoreView || showButtonText ? buttonText ? "".concat(_xeUtils.default.isFunction(buttonText) ? buttonText({}) : buttonText) : (0, _ui.getI18n)('vxe.upload.fileBtnText') : '',
+          icon: showButtonIcon ? buttonIcon || (0, _ui.getIcon)().UPLOAD_FILE_ADD : '',
+          disabled: isDisabled
+        }
+      })]), showTipText && (defTipText || tipSlot) ? h('div', {
+        class: 'vxe-upload--file-action-tip'
+      }, tipSlot ? (0, _vn.getSlotVNs)(tipSlot({
+        isMoreView: isMoreView,
+        options: fileList,
+        $upload: $xeUpload
+      })) : "".concat(defTipText)) : (0, _ui.renderEmptyElement)($xeUpload)]);
+    },
+    rendeFileMode: function rendeFileMode(h) {
+      var $xeUpload = this;
+      var props = $xeUpload;
+      var slots = $xeUpload.$scopedSlots;
+      var reactData = $xeUpload.reactData;
+      var showList = props.showList,
+        moreConfig = props.moreConfig,
+        dragSort = props.dragSort;
+      var fileList = reactData.fileList,
+        isDragMove = reactData.isDragMove;
+      var moreOpts = $xeUpload.computeMoreOpts;
+      var maxCount = moreOpts.maxCount,
+        showMoreButton = moreOpts.showMoreButton,
+        layout = moreOpts.layout,
+        moreButtonText = moreOpts.moreButtonText;
+      var isHorizontal = layout === 'horizontal';
+      var moreBtnSlot = slots.moreButton || slots['more-button'];
+      var currList = fileList;
+      var overMaxNum = 0;
+      var isMoreMax = false;
+      var isMiniMore = false;
+      if (_xeUtils.default.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 ? (0, _ui.renderEmptyElement)($xeUpload) : $xeUpload.renderFileAction(h, true), h('div', {
+        class: ['vxe-upload--file-list-wrapper', {
+          'is--horizontal': isHorizontal
+        }]
+      }, [currList.length ? dragSort ? h('transition-group', {
+        attrs: {
+          name: "vxe-upload--drag-list".concat(isDragMove ? '' : '-disabled'),
+          tag: 'div'
+        },
+        class: 'vxe-upload--file-list'
+      }, $xeUpload.renderFileItemList(h, currList, false)) : h('div', {
+        class: 'vxe-upload--file-list'
+      }, $xeUpload.renderFileItemList(h, currList, false)) : (0, _ui.renderEmptyElement)($xeUpload), showMoreButton && overMaxNum ? h('div', {
+        class: 'vxe-upload--file-over-more'
+      }, moreBtnSlot ? (0, _vn.getSlotVNs)(moreBtnSlot({
+        options: fileList
+      })) : [h(_button.default, {
+        props: {
+          mode: 'text',
+          content: moreButtonText ? _xeUtils.default.isFunction(moreButtonText) ? moreButtonText({
+            $upload: $xeUpload,
+            options: fileList
+          }) : _xeUtils.default.toFormatString(moreButtonText, [fileList.length]) : (0, _ui.getI18n)(isMoreMax && isMiniMore ? 'vxe.upload.moreFileBtnText' : 'vxe.upload.moreBtnText', [fileList.length]),
+          status: 'primary'
+        },
+        on: {
+          click: $xeUpload.handleMoreEvent
+        }
+      })]) : (0, _ui.renderEmptyElement)($xeUpload), showMoreButton && moreConfig && isHorizontal ? $xeUpload.renderFileAction(h, false) : (0, _ui.renderEmptyElement)($xeUpload)])] : [$xeUpload.renderFileAction(h, false)]);
+    },
+    renderImageItemList: function renderImageItemList(h, currList, isMoreView) {
+      var $xeUpload = this;
+      var props = $xeUpload;
+      var slots = $xeUpload.$scopedSlots;
+      var reactData = $xeUpload.reactData;
+      var showRemoveButton = props.showRemoveButton,
+        showProgress = props.showProgress,
+        progressText = props.progressText,
+        showPreview = props.showPreview,
+        showErrorStatus = props.showErrorStatus,
+        dragSort = props.dragSort,
+        autoSubmit = props.autoSubmit,
+        showSubmitButton = props.showSubmitButton;
+      var fileList = reactData.fileList,
+        fileCacheMaps = reactData.fileCacheMaps;
+      var isDisabled = $xeUpload.computeIsDisabled;
+      var formReadonly = $xeUpload.computeFormReadonly;
+      var imageOpts = $xeUpload.computeImageOpts;
+      var imgStyle = $xeUpload.computeImgStyle;
+      var optionSlot = slots.option;
+      var actionSlot = slots.action;
+      var cornerSlot = slots.corner;
+      var ons = {};
+      if (dragSort && currList.length > 1) {
+        ons.dragstart = $xeUpload.handleDragSortDragstartEvent;
+        ons.dragover = $xeUpload.handleDragSortDragoverEvent;
+        ons.dragend = $xeUpload.handleDragSortDragendEvent;
+      }
+      return currList.map(function (item, index) {
+        var fileKey = $xeUpload.getFieldKey(item);
+        var cacheItem = fileCacheMaps[fileKey];
+        var isLoading = false;
+        var isError = false;
+        var 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--image-item', {
+            'is--preview': showPreview,
+            'is--circle': imageOpts.circle,
+            'is--loading': isLoading,
+            'is--pending': isPending,
+            'is--error': isError
+          }],
+          attrs: {
+            fileid: fileKey,
+            draggable: dragSort ? true : null
+          },
+          on: ons
+        }, optionSlot ? (0, _vn.getSlotVNs)(optionSlot({
+          option: item,
+          isMoreView: isMoreView,
+          options: fileList
+        })) : [h('div', {
+          class: 'vxe-upload--image-item-box',
+          style: isMoreView ? {} : imgStyle,
+          on: {
+            click: function click(evnt) {
+              if (!isLoading && !isError) {
+                $xeUpload.handlePreviewImageEvent(evnt, item, index);
+              }
+            }
+          }
+        }, [isLoading && cacheItem ? h('div', {
+          class: 'vxe-upload--image-item-loading'
+        }, [h('div', {
+          class: 'vxe-upload--image-item-loading-icon'
+        }, [h('i', {
+          class: (0, _ui.getIcon)().UPLOAD_LOADING
+        })]), showProgress ? h('div', {
+          class: 'vxe-upload--image-item-loading-text'
+        }, progressText ? _xeUtils.default.toFormatString("".concat(_xeUtils.default.isFunction(progressText) ? progressText({}) : progressText), {
+          percent: cacheItem.percent
+        }) : (0, _ui.getI18n)('vxe.upload.uploadProgress', [cacheItem.percent])) : (0, _ui.renderEmptyElement)($xeUpload)]) : (0, _ui.renderEmptyElement)($xeUpload), h('div', {
+          class: 'vxe-upload--image-item-img-wrapper',
+          attrs: {
+            title: (0, _ui.getI18n)('vxe.upload.viewItemTitle')
+          }
+        }, [h('img', {
+          class: 'vxe-upload--image-item-img',
+          attrs: {
+            src: $xeUpload.getThumbnailFileUrl(item)
+          }
+        })]), !isLoading && (isError && showErrorStatus || isPending && showSubmitButton && !autoSubmit) ? h('div', {
+          class: 'vxe-upload--image-item-rebtn'
+        }, [h(_button.default, {
+          props: {
+            icon: isError ? (0, _ui.getIcon)().UPLOAD_IMAGE_RE_UPLOAD : (0, _ui.getIcon)().UPLOAD_IMAGE_UPLOAD,
+            mode: 'text',
+            status: 'primary',
+            content: isError ? (0, _ui.getI18n)('vxe.upload.reUpload') : (0, _ui.getI18n)('vxe.upload.manualUpload')
+          },
+          on: {
+            click: function click(evnt) {
+              $xeUpload.handleReUploadEvent(evnt, item);
+            }
+          }
+        })]) : (0, _ui.renderEmptyElement)($xeUpload), h('div', {
+          class: 'vxe-upload--image-item-btn-wrapper',
+          on: {
+            click: function click(evnt) {
+              evnt.stopPropagation();
+            }
+          }
+        }, actionSlot ? (0, _vn.getSlotVNs)(actionSlot({
+          option: item,
+          isMoreView: isMoreView,
+          options: fileList,
+          readonly: formReadonly
+        })) : [cornerSlot ? h('div', {
+          class: 'vxe-upload--file-item-action'
+        }, (0, _vn.getSlotVNs)(cornerSlot({
+          option: item,
+          isMoreView: isMoreView,
+          options: fileList,
+          readonly: formReadonly
+        }))) : (0, _ui.renderEmptyElement)($xeUpload), showRemoveButton && !formReadonly && !isDisabled && !isLoading ? h('div', {
+          class: 'vxe-upload--image-item-remove-btn',
+          on: {
+            click: function click(evnt) {
+              evnt.stopPropagation();
+              $xeUpload.removeFileEvent(evnt, item, index);
+            }
+          }
+        }, [h('i', {
+          class: (0, _ui.getIcon)().UPLOAD_IMAGE_REMOVE
+        })]) : (0, _ui.renderEmptyElement)($xeUpload)])])]);
+      });
+    },
+    renderImageAction: function renderImageAction(h, isMoreView) {
+      var $xeUpload = this;
+      var props = $xeUpload;
+      var slots = $xeUpload.$scopedSlots;
+      var reactData = $xeUpload.reactData;
+      var showUploadButton = props.showUploadButton,
+        buttonText = props.buttonText,
+        buttonIcon = props.buttonIcon,
+        showButtonText = props.showButtonText,
+        showButtonIcon = props.showButtonIcon,
+        autoHiddenButton = props.autoHiddenButton;
+      var fileList = reactData.fileList;
+      var formReadonly = $xeUpload.computeFormReadonly;
+      var showTipText = $xeUpload.computedShowTipText;
+      var defTipText = $xeUpload.computedDefTipText;
+      var overCount = $xeUpload.computeOverCount;
+      var imgStyle = $xeUpload.computeImgStyle;
+      var defaultSlot = slots.default;
+      var tipSlot = slots.tip || slots.hint;
+      if (formReadonly || !showUploadButton || autoHiddenButton && overCount) {
+        return (0, _ui.renderEmptyElement)($xeUpload);
+      }
+      return h('div', {
+        key: 'action',
+        class: 'vxe-upload--image-action'
+      }, [h('div', {
+        class: 'vxe-upload--image-action-btn',
+        on: {
+          click: $xeUpload.clickEvent
+        }
+      }, defaultSlot ? defaultSlot({
+        isMoreView: isMoreView,
+        options: fileList,
+        $upload: $xeUpload
+      }) : [h('div', {
+        class: 'vxe-upload--image-action-box',
+        style: isMoreView ? {} : imgStyle
+      }, [showButtonIcon ? h('div', {
+        class: 'vxe-upload--image-action-icon'
+      }, [h('i', {
+        class: buttonIcon || (0, _ui.getIcon)().UPLOAD_IMAGE_ADD
+      })]) : (0, _ui.renderEmptyElement)($xeUpload), isMoreView || showButtonText ? h('div', {
+        class: 'vxe-upload--image-action-content'
+      }, buttonText ? "".concat(_xeUtils.default.isFunction(buttonText) ? buttonText({}) : buttonText) : (0, _ui.getI18n)('vxe.upload.imgBtnText')) : (0, _ui.renderEmptyElement)($xeUpload), showTipText && (defTipText || tipSlot) ? h('div', {
+        class: 'vxe-upload--image-action-hint'
+      }, tipSlot ? (0, _vn.getSlotVNs)(tipSlot({
+        isMoreView: isMoreView,
+        options: fileList,
+        $upload: $xeUpload
+      })) : "".concat(defTipText)) : (0, _ui.renderEmptyElement)($xeUpload)])])]);
+    },
+    renderImageMode: function renderImageMode(h) {
+      var $xeUpload = this;
+      var props = $xeUpload;
+      var slots = $xeUpload.$scopedSlots;
+      var reactData = $xeUpload.reactData;
+      var showList = props.showList,
+        dragSort = props.dragSort;
+      var fileList = reactData.fileList,
+        isDragMove = reactData.isDragMove;
+      var moreOpts = $xeUpload.computeMoreOpts;
+      var moreBtnSlot = slots.moreButton || slots['more-button'];
+      var maxCount = moreOpts.maxCount,
+        showMoreButton = moreOpts.showMoreButton,
+        moreButtonText = moreOpts.moreButtonText;
+      var currList = fileList;
+      var overMaxNum = 0;
+      var isMoreMax = false;
+      var isMiniMore = false;
+      if (_xeUtils.default.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('transition-group', {
+        attrs: {
+          name: "vxe-upload--drag-list".concat(isDragMove ? '' : '-disabled'),
+          tag: 'div'
+        },
+        class: 'vxe-upload--image-list'
+      }, $xeUpload.renderImageItemList(h, currList, false).concat([showMoreButton && overMaxNum ? h('div', {
+        key: 'om',
+        class: 'vxe-upload--image-over-more'
+      }, moreBtnSlot ? (0, _vn.getSlotVNs)(moreBtnSlot({
+        options: fileList
+      })) : [h(_button.default, {
+        props: {
+          mode: 'text',
+          content: moreButtonText ? _xeUtils.default.isFunction(moreButtonText) ? moreButtonText({
+            $upload: $xeUpload,
+            options: fileList
+          }) : _xeUtils.default.toFormatString(moreButtonText, [fileList.length]) : (0, _ui.getI18n)(isMoreMax && isMiniMore ? 'vxe.upload.moreImgBtnText' : 'vxe.upload.moreBtnText', [fileList.length]),
+          status: 'primary'
+        },
+        on: {
+          click: $xeUpload.handleMoreEvent
+        }
+      })]) : (0, _ui.renderEmptyElement)($xeUpload), $xeUpload.renderImageAction(h, false)])) : h('div', {
+        class: 'vxe-upload--image-list'
+      }, $xeUpload.renderImageItemList(h, currList, false).concat([showMoreButton && overMaxNum ? h('div', {
+        class: 'vxe-upload--image-over-more'
+      }, moreBtnSlot ? (0, _vn.getSlotVNs)(moreBtnSlot({
+        options: fileList
+      })) : [h(_button.default, {
+        props: {
+          mode: 'text',
+          content: moreButtonText ? _xeUtils.default.isFunction(moreButtonText) ? moreButtonText({
+            $upload: $xeUpload,
+            options: fileList
+          }) : _xeUtils.default.toFormatString(moreButtonText, [fileList.length]) : (0, _ui.getI18n)(isMoreMax && isMiniMore ? 'vxe.upload.moreImgBtnText' : 'vxe.upload.moreBtnText', [fileList.length]),
+          status: 'primary'
+        },
+        on: {
+          click: $xeUpload.handleMoreEvent
+        }
+      })]) : (0, _ui.renderEmptyElement)($xeUpload), $xeUpload.renderImageAction(h, false)]))] : [h('div', {
+        class: 'vxe-upload--image-list'
+      }, [$xeUpload.renderImageAction(h, false)])]);
+    },
+    renderVN: function renderVN(h) {
+      var $xeUpload = this;
+      var props = $xeUpload;
+      var reactData = $xeUpload.reactData;
+      var showErrorStatus = props.showErrorStatus,
+        dragToUpload = props.dragToUpload,
+        pasteToUpload = props.pasteToUpload,
+        dragSort = props.dragSort,
+        dragPlaceholder = props.dragPlaceholder;
+      var isDragUploadStatus = reactData.isDragUploadStatus,
+        showMorePopup = reactData.showMorePopup,
+        isActivated = reactData.isActivated,
+        dragIndex = reactData.dragIndex;
+      var vSize = $xeUpload.computeSize;
+      var isDisabled = $xeUpload.computeIsDisabled;
+      var formReadonly = $xeUpload.computeFormReadonly;
+      var isImage = $xeUpload.computeIsImage;
+      var ons = {};
+      if (dragToUpload && dragIndex === -1) {
+        ons.dragover = $xeUpload.handleUploadDragoverEvent;
+        ons.dragleave = $xeUpload.handleUploadDragleaveEvent;
+        ons.drop = $xeUpload.handleUploadDropEvent;
+      }
+      return h('div', {
+        ref: 'refElem',
+        class: ['vxe-upload', _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "size--".concat(vSize), vSize), 'is--active', isActivated), 'is--readonly', formReadonly), 'is--disabled', isDisabled), 'is--paste', pasteToUpload), 'show--error', showErrorStatus), 'is--drag', isDragUploadStatus)],
+        on: ons
+      }, [isImage ? $xeUpload.renderImageMode(h) : $xeUpload.rendeFileMode(h), dragSort ? h('div', {
+        ref: 'refDragLineElem',
+        class: 'vxe-upload--drag-line'
+      }) : (0, _ui.renderEmptyElement)($xeUpload), isDragUploadStatus && !showMorePopup ? h('div', {
+        class: 'vxe-upload--drag-placeholder'
+      }, dragPlaceholder || (0, _ui.getI18n)('vxe.upload.dragPlaceholder')) : (0, _ui.renderEmptyElement)($xeUpload)]);
+    }
+  },
+  created: function created() {
+    var $xeUpload = this;
+    $xeUpload.internalData = createInternalData();
+    $xeUpload.updateFileList();
+  },
+  mounted: function mounted() {
+    var $xeUpload = this;
+    var props = $xeUpload;
+    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) {
+      (0, _dom.initTpImg)();
+    }
+    _ui.globalEvents.on($xeUpload, 'paste', $xeUpload.handleGlobalPasteEvent);
+    _ui.globalEvents.on($xeUpload, 'click', $xeUpload.handleGlobalClickEvent);
+    _ui.globalEvents.on($xeUpload, 'blur', $xeUpload.handleGlobalBlurEvent);
+  },
+  beforeDestroy: function beforeDestroy() {
+    var $xeUpload = this;
+    var reactData = $xeUpload.reactData;
+    var internalData = $xeUpload.internalData;
+    reactData.isDragUploadStatus = false;
+    _ui.globalEvents.off($xeUpload, 'paste');
+    _ui.globalEvents.off($xeUpload, 'click');
+    _ui.globalEvents.off($xeUpload, 'blur');
+    _xeUtils.default.assign(reactData, createReactData());
+    _xeUtils.default.assign(internalData, createInternalData());
+  },
+  render: function render(h) {
+    return this.renderVN(h);
+  }
+});
+/* define-vxe-component end */