persagy-vant 0.0.35 → 0.0.37

package/lib/uploader/Uploader.js

@@ -25,6 +25,26 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
 var stdin_exports = {};
 __export(stdin_exports, {
   default: () => stdin_default
@@ -43,6 +63,8 @@ const uploaderProps = {
   accept: (0, import_utils.makeStringProp)("image/*"),
   capture: String,
   multiple: Boolean,
+  label: String,
+  required: Boolean,
   disabled: Boolean,
   readonly: Boolean,
   lazyLoad: Boolean,
@@ -112,37 +134,29 @@ var stdin_default = (0, import_vue.defineComponent)({
         modelValue,
         resultType
       } = props;
+      const createFileItem = (file) => __async(this, null, function* () {
+        const content = yield (0, import_utils2.readFileContent)(file, resultType);
+        const result = {
+          file,
+          status: "",
+          message: ""
+        };
+        if (content) {
+          result.content = content;
+        }
+        if ((0, import_utils2.isVideoFile)(result)) {
+          result.videoThumbnail = yield (0, import_utils2.createVideoThumbnail)(file);
+        }
+        return result;
+      });
       if (Array.isArray(files)) {
         const remainCount = +maxCount - modelValue.length;
         if (files.length > remainCount) {
           files = files.slice(0, remainCount);
         }
-        Promise.all(files.map((file) => (0, import_utils2.readFileContent)(file, resultType))).then((contents) => {
-          const fileList = files.map((file, index) => {
-            const result = {
-              file,
-              status: "",
-              message: ""
-            };
-            if (contents[index]) {
-              result.content = contents[index];
-            }
-            return result;
-          });
-          onAfterRead(fileList);
-        });
+        Promise.all(files.map(createFileItem)).then(onAfterRead);
       } else {
-        (0, import_utils2.readFileContent)(files, resultType).then((content) => {
-          const result = {
-            file: files,
-            status: "",
-            message: ""
-          };
-          if (content) {
-            result.content = content;
-          }
-          onAfterRead(result);
-        });
+        createFileItem(files).then(onAfterRead);
       }
     };
     const onChange = (event) => {
@@ -175,7 +189,7 @@ var stdin_default = (0, import_vue.defineComponent)({
     let imagePreview;
     const onClosePreview = () => emit("close-preview");
     const previewImage = (item) => {
-      if (props.previewFullImage) {
+      if (props.previewFullImage && (0, import_utils2.isImageFile)(item)) {
         const imageFiles = props.modelValue.filter(import_utils2.isImageFile);
         const images = imageFiles.map((item2) => {
           if (item2.file && !item2.url && item2.status !== "failed") {
@@ -218,6 +232,15 @@ var stdin_default = (0, import_vue.defineComponent)({
         return props.modelValue.map(renderPreviewItem);
       }
     };
+    const renderLabel = () => {
+      if (!props.label)
+        return;
+      return (0, import_vue.createVNode)("div", {
+        "class": (0, import_utils2.bem)("label")
+      }, [props.required && (0, import_vue.createVNode)("span", {
+        "class": (0, import_utils2.bem)("required")
+      }, [(0, import_vue.createTextVNode)("*")]), props.label]);
+    };
     const onClickUpload = (event) => emit("click-upload", event);
     const renderUpload = () => {
       if (props.modelValue.length >= props.maxCount || !props.showUpload) {
@@ -266,8 +289,10 @@ var stdin_default = (0, import_vue.defineComponent)({
     });
     (0, import_use.useCustomFieldValue)(() => props.modelValue);
     return () => (0, import_vue.createVNode)("div", {
-      "class": (0, import_utils2.bem)()
-    }, [(0, import_vue.createVNode)("div", {
+      "class": (0, import_utils2.bem)({
+        required: props.required && !props.label
+      })
+    }, [renderLabel(), (0, import_vue.createVNode)("div", {
       "class": (0, import_utils2.bem)("wrapper", {
         disabled: props.disabled
       })

package/lib/uploader/UploaderPreviewItem.d.ts

@@ -14,7 +14,7 @@ declare const _default: import("vue").DefineComponent<{
     deletable: BooleanConstructor;
     previewSize: PropType<Numeric | [Numeric, Numeric]>;
     beforeDelete: PropType<Interceptor>;
-}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("delete" | "preview")[], "delete" | "preview", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("click" | "delete" | "preview")[], "click" | "delete" | "preview", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     name: (NumberConstructor | StringConstructor)[];
     item: {
         type: PropType<UploaderFileListItem>;
@@ -27,6 +27,7 @@ declare const _default: import("vue").DefineComponent<{
     previewSize: PropType<Numeric | [Numeric, Numeric]>;
     beforeDelete: PropType<Interceptor>;
 }>> & {
+    onClick?: ((...args: any[]) => any) | undefined;
     onDelete?: ((...args: any[]) => any) | undefined;
     onPreview?: ((...args: any[]) => any) | undefined;
 }, {

package/lib/uploader/UploaderPreviewItem.js

@@ -37,7 +37,7 @@ var stdin_default = (0, import_vue.defineComponent)({
     previewSize: [Number, String, Array],
     beforeDelete: Function
   },
-  emits: ["delete", "preview"],
+  emits: ["delete", "preview", "click"],
   setup(props, {
     emit,
     slots
@@ -78,7 +78,11 @@ var stdin_default = (0, import_vue.defineComponent)({
         done: () => emit("delete")
       });
     };
-    const onPreview = () => emit("preview");
+    const onPreview = () => {
+      emit("preview");
+      emit("click");
+    };
+    const onFilePreview = () => emit("click");
     const renderDeleteIcon = () => {
       if (props.deletable && props.item.status !== "uploading") {
         const slot = slots["preview-delete"];
@@ -116,10 +120,12 @@ var stdin_default = (0, import_vue.defineComponent)({
         imageFit,
         previewSize
       } = props;
-      if ((0, import_utils.isImageFile)(item)) {
+      const isImage = (0, import_utils.isImageFile)(item);
+      const isVideo = (0, import_utils.isVideoFile)(item);
+      if (isImage || isVideo && item.videoThumbnail) {
         return (0, import_vue.createVNode)(import_image.Image, {
           "fit": imageFit,
-          "src": item.content || item.url,
+          "src": isVideo ? item.videoThumbnail : item.content || item.url,
           "class": (0, import_utils.bem)("preview-image"),
           "width": Array.isArray(previewSize) ? previewSize[0] : previewSize,
           "height": Array.isArray(previewSize) ? previewSize[1] : previewSize,
@@ -131,7 +137,8 @@ var stdin_default = (0, import_vue.defineComponent)({
       }
       return (0, import_vue.createVNode)("div", {
         "class": (0, import_utils.bem)("file"),
-        "style": (0, import_utils2.getSizeStyle)(props.previewSize)
+        "style": (0, import_utils2.getSizeStyle)(props.previewSize),
+        "onClick": onFilePreview
       }, [(0, import_vue.createVNode)(import_icon.Icon, {
         "class": (0, import_utils.bem)("file-icon"),
         "name": "description"

package/lib/uploader/index.css

@@ -1 +1 @@
-:root{--van-uploader-size: 72px;--van-uploader-border-radius: 8px;--van-uploader-border: 1px solid var(--van-grey-50);--van-uploader-icon-size: 24px;--van-uploader-icon-color: var(--van-gray-4);--van-uploader-text-color: var(--van-text-color-2);--van-uploader-text-font-size: var(--van-font-size-sm);--van-uploader-upload-background-color: var(--van-gray-1);--van-uploader-upload-active-color: var(--van-active-color);--van-uploader-delete-color: var(--van-white);--van-uploader-delete-icon-size: 14px;--van-uploader-delete-background-color: rgba(0, 0, 0, .7);--van-uploader-file-background-color: var(--van-background-color);--van-uploader-file-icon-size: 20px;--van-uploader-file-icon-color: var(--van-gray-7);--van-uploader-file-name-padding: 0 var(--van-padding-base);--van-uploader-file-name-margin-top: var(--van-padding-xs);--van-uploader-file-name-font-size: var(--van-font-size-sm);--van-uploader-file-name-text-color: var(--van-gray-7);--van-uploader-mask-text-color: var(--van-white);--van-uploader-mask-background-color: rgba(50, 50, 51, .88);--van-uploader-mask-icon-size: 22px;--van-uploader-mask-message-font-size: var(--van-font-size-sm);--van-uploader-mask-message-line-height: var(--van-line-height-xs);--van-uploader-loading-icon-size: 22px;--van-uploader-loading-icon-color: var(--van-white);--van-uploader-disabled-opacity: var(--van-disabled-opacity)}.van-uploader{position:relative;display:inline-block}.van-uploader__wrapper{display:flex;flex-wrap:wrap;gap:var(--van-padding-xs)}.van-uploader__wrapper--disabled{opacity:var(--van-uploader-disabled-opacity)}.van-uploader__input{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;cursor:pointer;opacity:0}.van-uploader__input-wrapper{position:relative}.van-uploader__input:disabled{cursor:not-allowed}.van-uploader__upload{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box;width:var(--van-uploader-size);height:var(--van-uploader-size);background:var(--van-uploader-upload-background-color);border-radius:var(--van-uploader-border-radius);border:var(--van-uploader-border)}.van-uploader__upload:active{background-color:var(--van-uploader-upload-active-color)}.van-uploader__upload--readonly:active{background-color:var(--van-uploader-upload-background-color)}.van-uploader__upload-icon{color:var(--van-uploader-icon-color);font-size:var(--van-uploader-icon-size)}.van-uploader__upload-text{margin-top:var(--van-padding-xs);color:var(--van-uploader-text-color);font-size:var(--van-uploader-text-font-size)}.van-uploader__preview{position:relative;cursor:pointer;border-radius:var(--van-uploader-border-radius);overflow:hidden}.van-uploader__preview-image{display:block;width:var(--van-uploader-size);height:var(--van-uploader-size);border-radius:var(--van-uploader-border-radius);border:var(--van-uploader-border);overflow:hidden;box-sizing:border-box}.van-uploader__preview-delete{position:absolute;top:0;right:0}.van-uploader__preview-delete--shadow{width:var(--van-uploader-delete-icon-size);height:var(--van-uploader-delete-icon-size);background:var(--van-uploader-delete-background-color);border-radius:0 0 0 12px}.van-uploader__preview-delete-icon{position:absolute;top:0;right:0;color:var(--van-uploader-delete-color);font-size:var(--van-uploader-delete-icon-size);transform:scale(.7) translate(10%,-10%)}.van-uploader__preview-cover{position:absolute;top:0;right:0;bottom:0;left:0}.van-uploader__mask{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--van-uploader-mask-text-color);background:var(--van-uploader-mask-background-color);border-radius:var(--van-uploader-border-radius);border:var(--van-uploader-border)}.van-uploader__mask-icon{font-size:var(--van-uploader-mask-icon-size)}.van-uploader__mask-message{margin-top:6px;padding:0 var(--van-padding-base);font-size:var(--van-uploader-mask-message-font-size);line-height:var(--van-uploader-mask-message-line-height)}.van-uploader__loading{width:var(--van-uploader-loading-icon-size);height:var(--van-uploader-loading-icon-size);color:var(--van-uploader-loading-icon-color)}.van-uploader__file{display:flex;flex-direction:column;align-items:center;justify-content:center;width:var(--van-uploader-size);height:var(--van-uploader-size);background:var(--van-uploader-file-background-color)}.van-uploader__file-icon{color:var(--van-uploader-file-icon-color);font-size:var(--van-uploader-file-icon-size)}.van-uploader__file-name{box-sizing:border-box;width:100%;margin-top:var(--van-uploader-file-name-margin-top);padding:var(--van-uploader-file-name-padding);color:var(--van-uploader-file-name-text-color);font-size:var(--van-uploader-file-name-font-size);text-align:center}
+:root{--van-uploader-size: 72px;--van-uploader-border-radius: 8px;--van-uploader-border: 1px solid var(--van-grey-50);--van-uploader-icon-size: 24px;--van-uploader-icon-color: var(--van-gray-4);--van-uploader-text-color: var(--van-text-color-2);--van-uploader-text-font-size: var(--van-font-size-sm);--van-uploader-upload-background-color: var(--van-gray-1);--van-uploader-upload-active-color: var(--van-active-color);--van-uploader-delete-color: var(--van-white);--van-uploader-delete-icon-size: 14px;--van-uploader-delete-background-color: rgba(0, 0, 0, .7);--van-uploader-file-background-color: var(--van-background-color);--van-uploader-file-icon-size: 20px;--van-uploader-file-icon-color: var(--van-gray-7);--van-uploader-file-name-padding: 0 var(--van-padding-base);--van-uploader-file-name-margin-top: var(--van-padding-xs);--van-uploader-file-name-font-size: var(--van-font-size-sm);--van-uploader-file-name-text-color: var(--van-gray-7);--van-uploader-mask-text-color: var(--van-white);--van-uploader-mask-background-color: rgba(50, 50, 51, .88);--van-uploader-mask-icon-size: 22px;--van-uploader-mask-message-font-size: var(--van-font-size-sm);--van-uploader-mask-message-line-height: var(--van-line-height-xs);--van-uploader-loading-icon-size: 22px;--van-uploader-loading-icon-color: var(--van-white);--van-uploader-disabled-opacity: var(--van-disabled-opacity);--van-uploader-required-color: var(--van-danger-color);--van-uploader-label-color: var(--van-text-color);--van-uploader-label-font-size: var(--van-font-size-md);--van-uploader-label-line-height: var(--van-line-height-md);--van-uploader-label-margin-bottom: var(--van-padding-sm)}.van-uploader{position:relative;display:inline-block}.van-uploader--required:before{position:absolute;top:0;left:calc(-1 * var(--van-padding-sm));color:var(--van-uploader-required-color);font-size:var(--van-font-size-md);line-height:var(--van-line-height-md);content:"*"}.van-uploader__label{position:relative;margin-bottom:var(--van-uploader-label-margin-bottom);color:var(--van-uploader-label-color);font-size:var(--van-uploader-label-font-size);line-height:var(--van-uploader-label-line-height)}.van-uploader__required{position:absolute;top:0;left:calc(-1 * (var(--van-padding-md) - var(--van-padding-xs)));color:var(--van-uploader-required-color)}.van-uploader__wrapper{display:flex;flex-wrap:wrap;gap:var(--van-padding-xs)}.van-uploader__wrapper--disabled{opacity:var(--van-uploader-disabled-opacity)}.van-uploader__input{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;cursor:pointer;opacity:0}.van-uploader__input-wrapper{position:relative}.van-uploader__input:disabled{cursor:not-allowed}.van-uploader__upload{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box;width:var(--van-uploader-size);height:var(--van-uploader-size);background:var(--van-uploader-upload-background-color);border-radius:var(--van-uploader-border-radius);border:var(--van-uploader-border)}.van-uploader__upload:active{background-color:var(--van-uploader-upload-active-color)}.van-uploader__upload--readonly:active{background-color:var(--van-uploader-upload-background-color)}.van-uploader__upload-icon{color:var(--van-uploader-icon-color);font-size:var(--van-uploader-icon-size)}.van-uploader__upload-text{margin-top:var(--van-padding-xs);color:var(--van-uploader-text-color);font-size:var(--van-uploader-text-font-size)}.van-uploader__preview{position:relative;cursor:pointer;border-radius:var(--van-uploader-border-radius);overflow:hidden}.van-uploader__preview-image{display:block;width:var(--van-uploader-size);height:var(--van-uploader-size);border-radius:var(--van-uploader-border-radius);border:var(--van-uploader-border);overflow:hidden;box-sizing:border-box}.van-uploader__preview-delete{position:absolute;top:0;right:0}.van-uploader__preview-delete--shadow{width:var(--van-uploader-delete-icon-size);height:var(--van-uploader-delete-icon-size);background:var(--van-uploader-delete-background-color);border-radius:0 0 0 12px}.van-uploader__preview-delete-icon{position:absolute;top:0;right:0;color:var(--van-uploader-delete-color);font-size:var(--van-uploader-delete-icon-size);transform:scale(.7) translate(10%,-10%)}.van-uploader__preview-cover{position:absolute;top:0;right:0;bottom:0;left:0}.van-uploader__mask{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--van-uploader-mask-text-color);background:var(--van-uploader-mask-background-color);border-radius:var(--van-uploader-border-radius);border:var(--van-uploader-border)}.van-uploader__mask-icon{font-size:var(--van-uploader-mask-icon-size)}.van-uploader__mask-message{margin-top:6px;padding:0 var(--van-padding-base);font-size:var(--van-uploader-mask-message-font-size);line-height:var(--van-uploader-mask-message-line-height)}.van-uploader__loading{width:var(--van-uploader-loading-icon-size);height:var(--van-uploader-loading-icon-size);color:var(--van-uploader-loading-icon-color)}.van-uploader__file{display:flex;flex-direction:column;align-items:center;justify-content:center;width:var(--van-uploader-size);height:var(--van-uploader-size);background:var(--van-uploader-file-background-color)}.van-uploader__file-icon{color:var(--van-uploader-file-icon-color);font-size:var(--van-uploader-file-icon-size)}.van-uploader__file-name{box-sizing:border-box;width:100%;margin-top:var(--van-uploader-file-name-margin-top);padding:var(--van-uploader-file-name-padding);color:var(--van-uploader-file-name-text-color);font-size:var(--van-uploader-file-name-font-size);text-align:center}

package/lib/uploader/index.d.ts

@@ -10,6 +10,8 @@ export declare const Uploader: import("../utils").WithInstall<import("vue").Defi
     };
     capture: StringConstructor;
     multiple: BooleanConstructor;
+    label: StringConstructor;
+    required: BooleanConstructor;
     disabled: BooleanConstructor;
     readonly: BooleanConstructor;
     lazyLoad: BooleanConstructor;
@@ -70,6 +72,8 @@ export declare const Uploader: import("../utils").WithInstall<import("vue").Defi
     };
     capture: StringConstructor;
     multiple: BooleanConstructor;
+    label: StringConstructor;
+    required: BooleanConstructor;
     disabled: BooleanConstructor;
     readonly: BooleanConstructor;
     lazyLoad: BooleanConstructor;
@@ -127,6 +131,7 @@ export declare const Uploader: import("../utils").WithInstall<import("vue").Defi
     "onClose-preview"?: ((...args: any[]) => any) | undefined;
     "onClick-preview"?: ((...args: any[]) => any) | undefined;
 }, {
+    required: boolean;
     name: string | number;
     accept: string;
     disabled: boolean;

package/lib/uploader/index.less

@@ -28,12 +28,42 @@
   --van-uploader-loading-icon-size: @uploader-loading-icon-size;
   --van-uploader-loading-icon-color: @uploader-loading-icon-color;
   --van-uploader-disabled-opacity: @uploader-disabled-opacity;
+  --van-uploader-required-color: @uploader-required-color;
+  --van-uploader-label-color: @uploader-label-color;
+  --van-uploader-label-font-size: @uploader-label-font-size;
+  --van-uploader-label-line-height: @uploader-label-line-height;
+  --van-uploader-label-margin-bottom: @uploader-label-margin-bottom;
 }
 
 .van-uploader {
   position: relative;
   display: inline-block;
 
+  &--required::before {
+    position: absolute;
+    top: 0;
+    left: calc(-1 * var(--van-padding-sm));
+    color: var(--van-uploader-required-color);
+    font-size: var(--van-font-size-md);
+    line-height: var(--van-line-height-md);
+    content: '*';
+  }
+
+  &__label {
+    position: relative;
+    margin-bottom: var(--van-uploader-label-margin-bottom);
+    color: var(--van-uploader-label-color);
+    font-size: var(--van-uploader-label-font-size);
+    line-height: var(--van-uploader-label-line-height);
+  }
+
+  &__required {
+    position: absolute;
+    top: 0;
+    left: calc(-1 * (var(--van-padding-md) - var(--van-padding-xs)));
+    color: var(--van-uploader-required-color);
+  }
+
   &__wrapper {
     display: flex;
     flex-wrap: wrap;

package/lib/uploader/types.d.ts

@@ -8,6 +8,7 @@ export declare type UploaderFileListItem = {
     file?: File;
     content?: string;
     isImage?: boolean;
+    videoThumbnail?: string;
     status?: '' | 'uploading' | 'done' | 'failed';
     message?: string;
     imageFit?: ImageFit;

package/lib/uploader/utils.d.ts

@@ -9,3 +9,5 @@ export declare function filterFiles(items: UploaderFileListItem[], maxSize: Uplo
 };
 export declare const isImageUrl: (url: string) => boolean;
 export declare function isImageFile(item: UploaderFileListItem): boolean;
+export declare function isVideoFile(item: UploaderFileListItem): boolean;
+export declare function createVideoThumbnail(file: File): Promise<string | undefined>;

package/lib/uploader/utils.js

@@ -18,10 +18,12 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var stdin_exports = {};
 __export(stdin_exports, {
   bem: () => bem,
+  createVideoThumbnail: () => createVideoThumbnail,
   filterFiles: () => filterFiles,
   isImageFile: () => isImageFile,
   isImageUrl: () => isImageUrl,
   isOversize: () => isOversize,
+  isVideoFile: () => isVideoFile,
   name: () => name,
   readFileContent: () => readFileContent,
   t: () => t
@@ -70,6 +72,7 @@ function filterFiles(items, maxSize) {
   return { valid, invalid };
 }
 const IMAGE_REGEXP = /\.(jpeg|jpg|gif|png|svg|webp|jfif|bmp|dpg)/i;
+const VIDEO_REGEXP = /\.(mp4|webm|ogg|mov)(?:$|\?)/i;
 const isImageUrl = (url) => IMAGE_REGEXP.test(url);
 function isImageFile(item) {
   if (item.isImage) {
@@ -86,3 +89,74 @@ function isImageFile(item) {
   }
   return false;
 }
+function isVideoFile(item) {
+  var _a;
+  if ((_a = item.file) == null ? void 0 : _a.type) {
+    return item.file.type.indexOf("video/") === 0;
+  }
+  if (item.url) {
+    return VIDEO_REGEXP.test(item.url);
+  }
+  return typeof item.content === "string" && item.content.indexOf("data:video") === 0;
+}
+function createVideoThumbnail(file) {
+  if (typeof document === "undefined" || typeof URL === "undefined" || typeof URL.createObjectURL !== "function") {
+    return Promise.resolve(void 0);
+  }
+  return new Promise((resolve) => {
+    const video = document.createElement("video");
+    const objectUrl = URL.createObjectURL(file);
+    let settled = false;
+    let timeout;
+    const cleanup = () => {
+      if (timeout !== void 0) {
+        window.clearTimeout(timeout);
+      }
+      URL.revokeObjectURL(objectUrl);
+      video.removeAttribute("src");
+      try {
+        video.load();
+      } catch (e) {
+      }
+    };
+    const done = (thumbnail) => {
+      if (settled)
+        return;
+      settled = true;
+      cleanup();
+      resolve(thumbnail);
+    };
+    const captureFrame = () => {
+      if (!video.videoWidth || !video.videoHeight) {
+        done();
+        return;
+      }
+      const canvas = document.createElement("canvas");
+      canvas.width = video.videoWidth;
+      canvas.height = video.videoHeight;
+      const context = canvas.getContext("2d");
+      if (!context) {
+        done();
+        return;
+      }
+      context.drawImage(video, 0, 0, canvas.width, canvas.height);
+      done(canvas.toDataURL("image/jpeg", 0.8));
+    };
+    video.muted = true;
+    video.playsInline = true;
+    video.preload = "auto";
+    video.onloadedmetadata = () => {
+      const duration = Number.isFinite(video.duration) ? video.duration : 0.1;
+      const frameTime = Math.min(0.1, Math.max(duration - 0.01, 0));
+      if (frameTime) {
+        video.currentTime = frameTime;
+      } else {
+        captureFrame();
+      }
+    };
+    video.onseeked = captureFrame;
+    video.onerror = () => done();
+    video.src = objectUrl;
+    timeout = window.setTimeout(() => done(), 3e3);
+  });
+}

package/lib/uploader/var.less

@@ -27,3 +27,8 @@
 @uploader-loading-icon-size: 22px;
 @uploader-loading-icon-color: var(--van-white);
 @uploader-disabled-opacity: var(--van-disabled-opacity);
+@uploader-required-color: var(--van-danger-color);
+@uploader-label-color: var(--van-text-color);
+@uploader-label-font-size: var(--van-font-size-md);
+@uploader-label-line-height: var(--van-line-height-md);
+@uploader-label-margin-bottom: var(--van-padding-sm);