bkui-vue 2.0.1-beta.9 → 2.0.1-beta.91

package/lib/upload/index.js

@@ -1292,12 +1292,17 @@ var EThemes;
   EThemes["DRAGGABLE"] = "draggable";
   EThemes["PICTURE"] = "picture";
 })(EThemes || (EThemes = {}));
+var ETypes;
+(function (ETypes) {
+  ETypes["BINARY"] = "binary";
+  ETypes["FORMDATA"] = "formdata";
+})(ETypes || (ETypes = {}));
 var EUploadStatus;
 (function (EUploadStatus) {
+  EUploadStatus["FAIL"] = "fail";
   EUploadStatus["NEW"] = "new";
-  EUploadStatus["UPLOADING"] = "uploading";
   EUploadStatus["SUCCESS"] = "success";
-  EUploadStatus["FAIL"] = "fail";
+  EUploadStatus["UPLOADING"] = "uploading";
 })(EUploadStatus || (EUploadStatus = {}));
 ;// CONCATENATED MODULE: ../../packages/upload/src/props.ts
 /*
@@ -1327,7 +1332,19 @@ var EUploadStatus;
  */
 
 var themes = [EThemes.BUTTON, EThemes.DRAGGABLE, EThemes.PICTURE];
+var types = [ETypes.FORMDATA, ETypes.BINARY];
 /* harmony default export */ const props = ({
+  type: {
+    type: String,
+    "default": 'formdata',
+    validator: function validator(val) {
+      if (!val || types.includes(val)) {
+        return true;
+      }
+      console.error("invalid type, ".concat(val, ", the type must be one of \u3010").concat(types.join(' | '), "\u3011"));
+      return false;
+    }
+  },
   theme: {
     type: String,
     "default": 'draggable',
@@ -1459,6 +1476,11 @@ var themes = [EThemes.BUTTON, EThemes.DRAGGABLE, EThemes.PICTURE];
   chunkSize: {
     type: Number,
     "default": 10
+  },
+  // 是否显示预览按钮
+  isShowPreview: {
+    type: Boolean,
+    "default": true
   }
 });
 ;// CONCATENATED MODULE: ../../node_modules/@babel/runtime/helpers/esm/arrayWithHoles.js
@@ -1524,7 +1546,7 @@ function _slicedToArray(arr, i) {
 ;// CONCATENATED MODULE: external "../icon"
 var icon_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
 var icon_y = x => () => x
-const icon_namespaceObject = icon_x({ ["ArchiveFill"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_icon_a97c79c3__.ArchiveFill, ["AudioFill"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_icon_a97c79c3__.AudioFill, ["Del"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_icon_a97c79c3__.Del, ["Done"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_icon_a97c79c3__.Done, ["ImageFill"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_icon_a97c79c3__.ImageFill, ["Plus"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_icon_a97c79c3__.Plus, ["RightTurnLine"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_icon_a97c79c3__.RightTurnLine, ["TextFill"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_icon_a97c79c3__.TextFill, ["Upload"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_icon_a97c79c3__.Upload, ["VideoFill"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_icon_a97c79c3__.VideoFill });
+const icon_namespaceObject = icon_x({ ["ArchiveFill"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_icon_a97c79c3__.ArchiveFill, ["AudioFill"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_icon_a97c79c3__.AudioFill, ["Del"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_icon_a97c79c3__.Del, ["Done"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_icon_a97c79c3__.Done, ["Eye"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_icon_a97c79c3__.Eye, ["ImageFill"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_icon_a97c79c3__.ImageFill, ["Plus"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_icon_a97c79c3__.Plus, ["RightTurnLine"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_icon_a97c79c3__.RightTurnLine, ["TextFill"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_icon_a97c79c3__.TextFill, ["Upload"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_icon_a97c79c3__.Upload, ["VideoFill"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_icon_a97c79c3__.VideoFill });
 ;// CONCATENATED MODULE: external "../progress"
 var progress_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
 var progress_y = x => () => x
@@ -1579,9 +1601,10 @@ function _isSlot(s) {
     theme: props.theme,
     disabled: props.disabled,
     files: props.files,
-    multiple: props.multiple
+    multiple: props.multiple,
+    isShowPreview: props.isShowPreview
   },
-  emits: ['remove', 'retry'],
+  emits: ['remove', 'preview', 'retry'],
   setup: function setup(props, _ref) {
     var slots = _ref.slots,
       emit = _ref.emit;
@@ -1591,7 +1614,8 @@ function _isSlot(s) {
     var _toRefs = (0,external_vue_namespaceObject.toRefs)(props),
       theme = _toRefs.theme,
       disabled = _toRefs.disabled,
-      multiple = _toRefs.multiple;
+      multiple = _toRefs.multiple,
+      isShowPreview = _toRefs.isShowPreview;
     var classBlock = "".concat(resolveClassName(CLASS_PREFIX), "-list");
     var isPhotowall = (0,external_vue_namespaceObject.computed)(function () {
       return theme.value === EThemes.PICTURE;
@@ -1608,6 +1632,9 @@ function _isSlot(s) {
       var size = value / Math.pow(1024, index);
       return "".concat(size.toFixed(2)).concat(uints[index]);
     }
+    function handlePreview(file, files, e) {
+      emit('preview', file, files, e);
+    }
     function handleRemove(file, e) {
       emit('remove', file, e);
     }
@@ -1634,22 +1661,27 @@ function _isSlot(s) {
     };
     var PhotoItem = function PhotoItem(file) {
       return [(0,external_vue_namespaceObject.withDirectives)((0,external_vue_namespaceObject.createVNode)("img", {
-        "src": file.url,
         "class": "".concat(classBlock, "__picture-item-thumbnail"),
-        "alt": ""
+        "alt": "",
+        "src": file.url
       }, null), [[external_vue_namespaceObject.vShow, file.status !== 'uploading']]), (0,external_vue_namespaceObject.createVNode)(external_vue_namespaceObject.Fragment, null, [file.status === 'uploading' && (0,external_vue_namespaceObject.createVNode)(progress_namespaceObject["default"], {
+        "width": 50,
         "class": "".concat(classBlock, "__picture-item-progress"),
-        "type": "circle",
-        "color": "#3a84ff",
         "bgColor": "#333",
-        "width": 50,
+        "color": "#3a84ff",
+        "percent": file.percentage,
         "titleStyle": {
           color: '#fff'
         },
-        "percent": file.percentage
+        "type": "circle"
       }, null)]), (0,external_vue_namespaceObject.createVNode)(external_vue_namespaceObject.Fragment, null, [!disabled.value && (0,external_vue_namespaceObject.createVNode)("div", {
         "class": "".concat(classBlock, "__picture-item-actions")
-      }, [(0,external_vue_namespaceObject.createVNode)(icon_namespaceObject.Del, {
+      }, [isShowPreview.value && (0,external_vue_namespaceObject.createVNode)(icon_namespaceObject.Eye, {
+        "class": "action-icon",
+        "onClick": function onClick(e) {
+          return handlePreview(file, props.files, e);
+        }
+      }, null), (0,external_vue_namespaceObject.createVNode)(icon_namespaceObject.Del, {
         "class": "action-icon",
         "onClick": function onClick(e) {
           return handleRemove(file, e);
@@ -1700,9 +1732,9 @@ function _isSlot(s) {
       return [(0,external_vue_namespaceObject.createVNode)("div", {
         "class": "".concat(classBlock, "__item-icon")
       }, [file.isPic ? (0,external_vue_namespaceObject.createVNode)("img", {
-        "src": file.url,
         "class": "".concat(classBlock, "__item-thumbnail"),
-        "alt": ""
+        "alt": "",
+        "src": file.url
       }, null) : FileIcon(file)]), (0,external_vue_namespaceObject.createVNode)("div", {
         "class": "".concat(classBlock, "__item-summary")
       }, [(0,external_vue_namespaceObject.createVNode)("div", {
@@ -1715,8 +1747,8 @@ function _isSlot(s) {
         "class": "".concat(classBlock, "__item-message-success-icon")
       }, null), file.statusText || t.value.uploadSuccess]), file.status === 'fail' && (0,external_vue_namespaceObject.createVNode)(external_vue_namespaceObject.Fragment, null, [file.statusText || t.value.uploadFailed])]), file.status === 'uploading' && (0,external_vue_namespaceObject.createVNode)(progress_namespaceObject["default"], {
         "class": "".concat(classBlock, "__item-progress"),
-        "showText": false,
         "percent": file.percentage,
+        "showText": false,
         "size": "small"
       }, null), file.status !== 'fail' && (0,external_vue_namespaceObject.createVNode)("div", {
         "class": "".concat(classBlock, "__item-speed")
@@ -1739,10 +1771,10 @@ function _isSlot(s) {
       }, null)])])];
     };
     return function () {
-      var _props$files;
-      return (0,external_vue_namespaceObject.createVNode)(external_vue_namespaceObject.Fragment, null, [isSinglePhoto.value ? (slots === null || slots === void 0 ? void 0 : slots.innerTrigger) && (slots === null || slots === void 0 ? void 0 : slots.innerTrigger((_props$files = props.files) === null || _props$files === void 0 ? void 0 : _props$files[0])) : (0,external_vue_namespaceObject.createVNode)("ul", {
+      var _slots$innerTrigger, _props$files, _slots$innerTrigger2;
+      return (0,external_vue_namespaceObject.createVNode)(external_vue_namespaceObject.Fragment, null, [isSinglePhoto.value ? slots === null || slots === void 0 || (_slots$innerTrigger = slots.innerTrigger) === null || _slots$innerTrigger === void 0 ? void 0 : _slots$innerTrigger.call(slots, (_props$files = props.files) === null || _props$files === void 0 ? void 0 : _props$files[0]) : (0,external_vue_namespaceObject.createVNode)("ul", {
         "class": classNames.value
-      }, [isPhotowall.value ? Photowall() : Normal(), (slots === null || slots === void 0 ? void 0 : slots.innerTrigger) && (slots === null || slots === void 0 ? void 0 : slots.innerTrigger())])]);
+      }, [isPhotowall.value ? Photowall() : Normal(), slots === null || slots === void 0 || (_slots$innerTrigger2 = slots.innerTrigger) === null || _slots$innerTrigger2 === void 0 ? void 0 : _slots$innerTrigger2.call(slots)])]);
     };
   }
 }));
@@ -1802,9 +1834,10 @@ const button_less_namespaceObject = button_less_x({  });
     file: {
       type: Object
     },
-    selectChange: props.selectChange
+    selectChange: props.selectChange,
+    isShowPreview: props.isShowPreview
   },
-  emits: ['change', 'remove'],
+  emits: ['change', 'remove', 'preview'],
   setup: function setup(props, _ref) {
     var slots = _ref.slots,
       emit = _ref.emit;
@@ -1816,7 +1849,8 @@ const button_less_namespaceObject = button_less_x({  });
       disabled = _toRefs.disabled,
       file = _toRefs.file,
       multiple = _toRefs.multiple,
-      accept = _toRefs.accept;
+      accept = _toRefs.accept,
+      isShowPreview = _toRefs.isShowPreview;
     var classBlock = "".concat(resolveClassName(CLASS_PREFIX), "-trigger");
     var isButton = (0,external_vue_namespaceObject.computed)(function () {
       return theme.value === EThemes.BUTTON;
@@ -1870,6 +1904,11 @@ const button_less_namespaceObject = button_less_x({  });
       e.stopPropagation();
       e.preventDefault();
     }
+    function handlePreview(file, e) {
+      emit('preview', file, [file], e);
+      e.stopPropagation();
+      e.preventDefault();
+    }
     var dragover = (0,external_vue_namespaceObject.ref)(false);
     var Dragger = function Dragger() {
       var handleDrop = function handleDrop(e) {
@@ -1895,9 +1934,9 @@ const button_less_namespaceObject = button_less_x({  });
       var classNames = (0,shared_namespaceObject.classes)(_defineProperty({}, "".concat(classBlock, "__draggable"), true));
       return (0,external_vue_namespaceObject.createVNode)("div", {
         "class": classNames,
-        "onDrop": handleDrop,
+        "onDragleave": handleDragleave,
         "onDragover": handleDragover,
-        "onDragleave": handleDragleave
+        "onDrop": handleDrop
       }, [slots["default"] ? slots["default"]() : (0,external_vue_namespaceObject.createVNode)(external_vue_namespaceObject.Fragment, null, [(0,external_vue_namespaceObject.createVNode)(icon_namespaceObject.Upload, {
         "class": "".concat(classBlock, "__draggable-icon")
       }, null), (0,external_vue_namespaceObject.createVNode)("div", {
@@ -1920,22 +1959,27 @@ const button_less_namespaceObject = button_less_x({  });
     };
     var SinglePicture = function SinglePicture(file) {
       return [(0,external_vue_namespaceObject.withDirectives)((0,external_vue_namespaceObject.createVNode)("img", {
-        "src": file.url,
         "class": "".concat(classBlock, "__picture-thumbnail"),
-        "alt": ""
+        "alt": "",
+        "src": file.url
       }, null), [[external_vue_namespaceObject.vShow, file.status !== 'uploading']]), (0,external_vue_namespaceObject.createVNode)(external_vue_namespaceObject.Fragment, null, [file.status === 'uploading' && (0,external_vue_namespaceObject.createVNode)(progress_namespaceObject["default"], {
+        "width": 50,
         "class": "".concat(classBlock, "__picture-progress"),
-        "type": "circle",
-        "color": "#3a84ff",
         "bgColor": "#333",
-        "width": 50,
+        "color": "#3a84ff",
+        "percent": file.percentage,
         "titleStyle": {
           color: '#fff'
         },
-        "percent": file.percentage
+        "type": "circle"
       }, null)]), (0,external_vue_namespaceObject.createVNode)(external_vue_namespaceObject.Fragment, null, [!props.disabled && (0,external_vue_namespaceObject.createVNode)("div", {
         "class": "".concat(classBlock, "__picture-actions")
-      }, [(0,external_vue_namespaceObject.createVNode)(icon_namespaceObject.Del, {
+      }, [isShowPreview.value && (0,external_vue_namespaceObject.createVNode)(icon_namespaceObject.Eye, {
+        "class": "action-icon",
+        "onClick": function onClick(e) {
+          return handlePreview(file, e);
+        }
+      }, null), (0,external_vue_namespaceObject.createVNode)(icon_namespaceObject.Del, {
         "class": "action-icon",
         "onClick": function onClick(e) {
           return handleRemove(file, e);
@@ -1970,12 +2014,12 @@ const button_less_namespaceObject = button_less_x({  });
       }, [slots.trigger ? [slots.trigger(), slots === null || slots === void 0 || (_slots$default = slots["default"]) === null || _slots$default === void 0 ? void 0 : _slots$default.call(slots)] : Trigger(), (0,external_vue_namespaceObject.createVNode)("input", {
         "ref": inputEl,
         "class": "".concat(classBlock, "__input-file"),
-        "tabindex": "-1",
-        "onChange": handleFileChange,
         "accept": acceptTypes.value,
-        "multiple": multiple.value,
         "disabled": disabled.value,
-        "type": "file"
+        "multiple": multiple.value,
+        "tabindex": "-1",
+        "type": "file",
+        "onChange": handleFileChange
       }, null)]);
     };
   }
@@ -2036,10 +2080,11 @@ var spark_md5_default = /*#__PURE__*/__webpack_require__.n(spark_md5);
  */
 
 
+var errMsg = 'An error occurred during upload';
 function getRes(xhr) {
   var res = xhr.responseText || xhr.response;
   if (!res) {
-    return res;
+    return res || {};
   }
   try {
     return JSON.parse(res);
@@ -2052,7 +2097,9 @@ var ajaxUpload = function ajaxUpload(option) {
     throw new Error('XMLHttpRequest is undefined');
   }
   var xhr = new XMLHttpRequest();
-  var action = option.action;
+  var action = option.action,
+    type = option.type;
+  var isFormdata = type === 'formdata';
   if (xhr.upload) {
     xhr.upload.addEventListener('progress', function (event) {
       var progressEvent = event;
@@ -2061,7 +2108,7 @@ var ajaxUpload = function ajaxUpload(option) {
     });
   }
   var formData = new FormData();
-  if (option.data) {
+  if (isFormdata && option.data) {
     var appendData = option.data;
     if (!Array.isArray(appendData)) {
       appendData = [appendData];
@@ -2075,7 +2122,7 @@ var ajaxUpload = function ajaxUpload(option) {
       }
     });
   }
-  if (option.formDataAttributes) {
+  if (isFormdata && option.formDataAttributes) {
     var _appendData = option.formDataAttributes;
     if (!Array.isArray(_appendData)) {
       _appendData = [_appendData];
@@ -2084,13 +2131,27 @@ var ajaxUpload = function ajaxUpload(option) {
       if (Array.isArray(item.value)) formData.append.apply(formData, [item.name].concat(_toConsumableArray(item.value)));else formData.append(item.name, item.value);
     });
   }
-  formData.append(option.filename, option.file, option.file.name);
+  if (isFormdata) {
+    formData.append(option.filename, option.file, option.file.name);
+  }
   xhr.addEventListener('error', function () {
-    option.onError(new Error('An error occurred during upload'));
+    var msg = new Error(errMsg);
+    var responseText = getRes(xhr);
+    if (responseText) {
+      msg = new Error(responseText.message || errMsg);
+    }
+    console.log(responseText, msg);
+    option.onError(msg);
+    // option.onError(new Error('An error occurred during upload'));
   });
   xhr.addEventListener('load', function () {
     if (xhr.status < 200 || xhr.status >= 300) {
-      return option.onError(new Error('An error occurred during upload'));
+      var responseText = getRes(xhr);
+      var msg = new Error(errMsg);
+      if (responseText) {
+        msg = new Error(responseText.message || errMsg);
+      }
+      return option.onError(msg);
     }
     option.onSuccess(getRes(xhr));
   });
@@ -2128,7 +2189,7 @@ var ajaxUpload = function ajaxUpload(option) {
       xhr.setRequestHeader(key, String(value));
     }
   }
-  xhr.send(formData);
+  xhr.send(isFormdata ? formData : option.file);
   return xhr;
 };
 // 该方法用于在不同的浏览器使用不同的方式
@@ -2168,10 +2229,15 @@ var ajaxSliceUpload = /*#__PURE__*/function () {
             req.open(option.method, option.mergeUrl, true);
             req.onreadystatechange = function () {
               if (req.readyState === 4) {
+                var responseText = getRes(req);
                 if (req.status < 200 || req.status >= 300) {
-                  return option.onError(new Error('An error occurred during upload'));
+                  var msg = new Error(errMsg);
+                  if (responseText) {
+                    msg = new Error(responseText.message || errMsg);
+                  }
+                  return option.onError(msg);
                 }
-                option.onSuccess(getRes(req));
+                option.onSuccess(responseText);
               }
             };
             req.onloadend = function () {
@@ -2193,7 +2259,6 @@ var ajaxSliceUpload = /*#__PURE__*/function () {
 // 请求分片上传，保存在progressList中
 var sliceSend = function sliceSend(option, file, blockCount, hash, progressList, chunkSize) {
   var _loop = function _loop(i) {
-    // eslint-disable-next-line no-loop-func
     var pooltask = new Promise(function (resolve, reject) {
       var start = i * chunkSize;
       var end = Math.min(file.size, start + chunkSize);
@@ -2231,10 +2296,14 @@ var sliceSend = function sliceSend(option, file, blockCount, hash, progressList,
       var xhr = new XMLHttpRequest();
       xhr.onreadystatechange = function () {
         if (xhr.readyState === 4) {
-          var res = getRes(xhr);
+          var responseText = getRes(xhr);
           if (xhr.status < 200 || xhr.status >= 300) {
-            reject(res);
-            option.onError(new Error('An error occurred during upload'));
+            reject(responseText);
+            var msg = new Error(errMsg);
+            if (responseText) {
+              msg = new Error(responseText.message || errMsg);
+            }
+            option.onError(msg);
           } else {
             resolve('reponseText');
           }
@@ -2312,7 +2381,7 @@ var hashFile = function hashFile(file, chunkSize) {
       }
     };
     fileReader.onerror = function () {
-      reject(new Error('File slcie failed'));
+      reject(new Error('File slice failed'));
     };
     loadNext();
   })["catch"](function (err) {
@@ -2609,7 +2678,7 @@ function upload_arrayLikeToArray(arr, len) { if (len == null || len > arr.length
 /* harmony default export */ const upload = ((0,external_vue_namespaceObject.defineComponent)({
   name: 'Upload',
   props: props,
-  emits: ['exceed', 'progress', 'success', 'error', 'delete', 'done'],
+  emits: ['exceed', 'progress', 'success', 'error', 'delete', 'done', 'preview'],
   setup: function setup(props, _ref) {
     var slots = _ref.slots,
       emit = _ref.emit,
@@ -2633,6 +2702,7 @@ function upload_arrayLikeToArray(arr, len) { if (len == null || len > arr.length
         multiple: props.multiple,
         disabled: props.disabled,
         accept: props.accept,
+        isShowPreview: props.isShowPreview,
         selectChange: props.selectChange
       };
     });
@@ -2687,6 +2757,9 @@ function upload_arrayLikeToArray(arr, len) { if (len == null || len > arr.length
         _iterator.f();
       }
     }
+    function handlePreview(file, files) {
+      emit('preview', file, files);
+    }
     function handleRetry(file) {
       send(file.raw);
     }
@@ -2707,7 +2780,7 @@ function upload_arrayLikeToArray(arr, len) { if (len == null || len > arr.length
             case 2:
               _context.prev = 2;
               _context.next = 5;
-              return (_props$beforeUpload = props.beforeUpload) === null || _props$beforeUpload === void 0 ? void 0 : _props$beforeUpload.call(props, file);
+              return (_props$beforeUpload = props.beforeUpload) === null || _props$beforeUpload === void 0 ? void 0 : _props$beforeUpload.call(props, file, sendFiles);
             case 5:
               beforeResult = _context.sent;
               _context.next = 11;
@@ -2734,7 +2807,8 @@ function upload_arrayLikeToArray(arr, len) { if (len == null || len > arr.length
       return _upload.apply(this, arguments);
     }
     function send(file, sendFiles) {
-      var headers = props.headers,
+      var type = props.type,
+        headers = props.headers,
         header = props.header,
         data = props.data,
         formDataAttributes = props.formDataAttributes,
@@ -2748,6 +2822,7 @@ function upload_arrayLikeToArray(arr, len) { if (len == null || len > arr.length
         customRequest = props.customRequest;
       var uid = file.uid;
       var options = {
+        type: type,
         headers: headers,
         header: header,
         withCredentials: withCredentials,
@@ -2818,6 +2893,7 @@ function upload_arrayLikeToArray(arr, len) { if (len == null || len > arr.length
       });
     });
     expose({
+      handlePreview: handlePreview,
       handleRemove: handleRemove,
       handleRetry: handleRetry
     });
@@ -2829,10 +2905,12 @@ function upload_arrayLikeToArray(arr, len) { if (len == null || len > arr.length
       }), slots), slots.tip ? slots.tip() : props.tip && (0,external_vue_namespaceObject.createVNode)("div", {
         "class": "".concat(resolveClassName(CLASS_PREFIX), "__tip")
       }, [props.tip]), (0,external_vue_namespaceObject.createVNode)(upload_list, {
-        "files": fileList.value,
-        "theme": props.theme,
         "disabled": props.disabled,
+        "files": fileList.value,
+        "isShowPreview": props.isShowPreview,
         "multiple": props.multiple,
+        "theme": props.theme,
+        "onPreview": handlePreview,
         "onRemove": handleRemove,
         "onRetry": handleRetry
       }, {
@@ -2840,6 +2918,7 @@ function upload_arrayLikeToArray(arr, len) { if (len == null || len > arr.length
           return isPhotowall.value && (0,external_vue_namespaceObject.createVNode)(upload_trigger, (0,external_vue_namespaceObject.mergeProps)(triggerProps.value, {
             "file": file,
             "onChange": handleFiles,
+            "onPreview": handlePreview,
             "onRemove": handleRemove
           }), slots);
         },

package/lib/upload/props.d.ts

@@ -1,6 +1,11 @@
+import { APIResponse, EThemes, ETypes, ExtraFormData, FormDataAttr, HeaderDataAttr, MaxSize, UploadFile, UploadRawFile, UploadRequestHandler } from './upload.type';
 import type { PropType } from 'vue';
-import { APIResponse, EThemes, ExtraFormData, FormDataAttr, HeaderDataAttr, MaxSize, UploadFile, UploadRawFile, UploadRequestHandler } from './upload.type';
 declare const _default: {
+    type: {
+        type: PropType<"formdata" | "binary">;
+        default: "formdata" | "binary";
+        validator: (val: ETypes) => boolean;
+    };
     theme: {
         type: PropType<"button" | "picture" | "draggable">;
         default: "button" | "picture" | "draggable";
@@ -89,7 +94,7 @@ declare const _default: {
         type: PropType<(event: Event) => boolean | void>;
     };
     beforeUpload: {
-        type: PropType<(file: UploadRawFile) => Promise<boolean> | boolean>;
+        type: PropType<(file: UploadRawFile, uploadFiles: File[]) => Promise<boolean> | boolean>;
     };
     beforeRemove: {
         type: PropType<(file: UploadFile, uploadFiles: UploadFile[]) => Promise<boolean> | boolean>;
@@ -110,5 +115,9 @@ declare const _default: {
         type: NumberConstructor;
         default: number;
     };
+    isShowPreview: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 };
 export default _default;

package/lib/upload/upload-list.d.ts

@@ -17,7 +17,11 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
-}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("remove" | "retry")[], "remove" | "retry", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    isShowPreview: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("remove" | "preview" | "retry")[], "remove" | "preview" | "retry", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     theme: {
         type: import("vue").PropType<"button" | "picture" | "draggable">;
         default: "button" | "picture" | "draggable";
@@ -35,13 +39,19 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    isShowPreview: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>> & {
     onRemove?: (...args: any[]) => any;
+    onPreview?: (...args: any[]) => any;
     onRetry?: (...args: any[]) => any;
 }, {
     disabled: boolean;
     theme: "button" | "picture" | "draggable";
     multiple: boolean;
     files: UploadFile[];
+    isShowPreview: boolean;
 }, {}>;
 export default _default;

package/lib/upload/upload-trigger.d.ts

@@ -23,7 +23,11 @@ declare const _default: import("vue").DefineComponent<{
     selectChange: {
         type: PropType<(event: Event) => boolean | void>;
     };
-}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "remove")[], "change" | "remove", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    isShowPreview: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "remove" | "preview")[], "change" | "remove" | "preview", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     theme: {
         type: PropType<"button" | "picture" | "draggable">;
         default: "button" | "picture" | "draggable";
@@ -46,12 +50,18 @@ declare const _default: import("vue").DefineComponent<{
     selectChange: {
         type: PropType<(event: Event) => boolean | void>;
     };
+    isShowPreview: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>> & {
     onChange?: (...args: any[]) => any;
     onRemove?: (...args: any[]) => any;
+    onPreview?: (...args: any[]) => any;
 }, {
     disabled: boolean;
     theme: "button" | "picture" | "draggable";
     multiple: boolean;
+    isShowPreview: boolean;
 }, {}>;
 export default _default;