@fecp/mobile 1.0.54 → 1.0.56

package/es/mobile.css

@@ -89,7 +89,7 @@
 :root,:host{--van-image-preview-index-text-color: var(--van-white);--van-image-preview-index-font-size: var(--van-font-size-md);--van-image-preview-index-line-height: var(--van-line-height-md);--van-image-preview-index-text-shadow: 0 1px 1px var(--van-gray-8);--van-image-preview-overlay-background: rgba(0, 0, 0, .9);--van-image-preview-close-icon-size: 22px;--van-image-preview-close-icon-color: var(--van-gray-5);--van-image-preview-close-icon-margin: var(--van-padding-md);--van-image-preview-close-icon-z-index: 1}.van-image-preview{position:fixed;top:0;left:0;width:100%;height:100%;max-width:none;background-color:transparent;transform:none}.van-image-preview__swipe{height:100%}.van-image-preview__swipe-item{display:flex;align-items:center;justify-content:center;overflow:hidden}.van-image-preview__cover{position:absolute;top:0;left:0}.van-image-preview__image,.van-image-preview__image-wrap{width:100%;transition-property:transform}.van-image-preview__image--vertical,.van-image-preview__image-wrap--vertical{width:auto;height:100%}.van-image-preview__image img,.van-image-preview__image-wrap img,.van-image-preview__image video,.van-image-preview__image-wrap video{-webkit-user-drag:none}.van-image-preview__image .van-image__error,.van-image-preview__image-wrap .van-image__error{top:30%;height:40%}.van-image-preview__image .van-image__error-icon,.van-image-preview__image-wrap .van-image__error-icon{font-size:36px}.van-image-preview__image .van-image__loading,.van-image-preview__image-wrap .van-image__loading{background-color:transparent}.van-image-preview__index{position:absolute;top:var(--van-padding-md);left:50%;color:var(--van-image-preview-index-text-color);font-size:var(--van-image-preview-index-font-size);line-height:var(--van-image-preview-index-line-height);text-shadow:var(--van-image-preview-index-text-shadow);transform:translate(-50%)}.van-image-preview__overlay{background:var(--van-image-preview-overlay-background)}.van-image-preview__close-icon{position:absolute;z-index:var(--van-image-preview-close-icon-z-index);color:var(--van-image-preview-close-icon-color);font-size:var(--van-image-preview-close-icon-size)}.van-image-preview__close-icon--top-left{top:var(--van-image-preview-close-icon-margin);left:var(--van-image-preview-close-icon-margin)}.van-image-preview__close-icon--top-right{top:var(--van-image-preview-close-icon-margin);right:var(--van-image-preview-close-icon-margin)}.van-image-preview__close-icon--bottom-left{bottom:var(--van-image-preview-close-icon-margin);left:var(--van-image-preview-close-icon-margin)}.van-image-preview__close-icon--bottom-right{right:var(--van-image-preview-close-icon-margin);bottom:var(--van-image-preview-close-icon-margin)}
 :root,:host{--van-uploader-size: 80px;--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: 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: rgba(0, 0, 0, .7);--van-uploader-file-background: var(--van-background);--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: 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-border-radius: 0px}.van-uploader{position:relative;display:inline-block}.van-uploader__wrapper{display:flex;flex-wrap:wrap}.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);margin:0 var(--van-padding-xs) var(--van-padding-xs) 0;background:var(--van-uploader-upload-background);border-radius:var(--van-uploader-border-radius)}.van-uploader__upload:active{background-color:var(--van-uploader-upload-active-color)}.van-uploader__upload--readonly:active{background-color:var(--van-uploader-upload-background)}.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;margin:0 var(--van-padding-xs) var(--van-padding-xs) 0;cursor:pointer}.van-uploader__preview-image{display:block;width:var(--van-uploader-size);height:var(--van-uploader-size);overflow:hidden;border-radius:var(--van-uploader-border-radius)}.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);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);border-radius:var(--van-uploader-border-radius)}.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)}.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}
 
-.preview-cover[data-v-cbd8c56a] {
+.preview-cover[data-v-f959e5af] {
   position: absolute;
   bottom: 0;
   box-sizing: border-box;
@@ -99,6 +99,12 @@
   text-align: center;
   background: rgba(0, 0, 0, 0.3);
   line-height: 24px;
+}
+.fac-uploader[data-v-f959e5af] .van-uploader__upload {
+  margin: 0;
+}
+.fac-uploader[data-v-f959e5af] .van-uploader__preview {
+  margin: 0 8px 0 0;
 }
 :root,:host{--van-action-bar-background: var(--van-background-2);--van-action-bar-height: 50px}.van-action-bar{position:fixed;right:0;bottom:0;left:0;display:flex;align-items:center;box-sizing:content-box;height:var(--van-action-bar-height);background:var(--van-action-bar-background)}
 :root,:host{--van-back-top-size: 40px;--van-back-top-right: 30px;--van-back-top-bottom: 40px;--van-back-top-z-index: 100;--van-back-top-icon-size: 20px;--van-back-top-text-color: #fff;--van-back-top-background: var(--van-blue)}.van-back-top{position:fixed;display:flex;align-items:center;justify-content:center;width:var(--van-back-top-size);height:var(--van-back-top-size);right:var(--van-back-top-right);bottom:var(--van-back-top-bottom);z-index:var(--van-back-top-z-index);cursor:pointer;color:var(--van-back-top-text-color);border-radius:var(--van-radius-max);box-shadow:0 2px 8px rgba(0,0,0,.12);transform:scale(0);transition:var(--van-duration-base) cubic-bezier(.25,.8,.5,1);background-color:var(--van-back-top-background)}.van-back-top:active{opacity:var(--van-active-opacity)}.van-back-top__placeholder{display:none}.van-back-top--active{transform:scale(1)}.van-back-top__icon{font-size:var(--van-back-top-icon-size);font-weight:var(--van-font-bold)}

package/es/packages/mobile/index.mjs

@@ -42,6 +42,7 @@ import { MobileFormItem } from "./src/components/form/formItem/index.mjs";
 import { MobileRadioGroup } from "./src/components/form/radioGroup/index.mjs";
 import { MobileSearch } from "./src/components/form/search/index.mjs";
 import { MobileUploader } from "./src/components/form/uploader/index.mjs";
+import { MobileFieldUploader } from "./src/components/form/fieldUploader/index.mjs";
 import { MobileSubmitButton } from "./src/components/form/submitButton/index.mjs";
 import { MobileActionBar } from "./src/components/navigation/actionBar/index.mjs";
 import { MobileBackTop } from "./src/components/navigation/backTop/index.mjs";
@@ -92,6 +93,7 @@ export {
   MobileFieldPicker,
   MobileFieldRadio,
   MobileFieldTimePicker,
+  MobileFieldUploader,
   MobileFloatingBubble,
   MobileFloatingPanel,
   MobileForm,

package/es/packages/mobile/src/axios/config.mjs

@@ -97,6 +97,9 @@ const axios = () => {
     put(url, data, config) {
       return service.put(url, data, config);
     },
+    upload(url, data, config) {
+      return service.postForm(url, data, config);
+    },
     interceptors: {
       request: {
         use(fnHandle, fnError) {

package/es/packages/mobile/src/components/all.mjs

@@ -39,6 +39,7 @@ import { MobileFormItem } from "./form/formItem/index.mjs";
 import { MobileRadioGroup } from "./form/radioGroup/index.mjs";
 import { MobileSearch } from "./form/search/index.mjs";
 import { MobileUploader } from "./form/uploader/index.mjs";
+import { MobileFieldUploader } from "./form/fieldUploader/index.mjs";
 import { MobileSubmitButton } from "./form/submitButton/index.mjs";
 import { MobileActionBar } from "./navigation/actionBar/index.mjs";
 import { MobileBackTop } from "./navigation/backTop/index.mjs";
@@ -78,6 +79,7 @@ export {
   MobileFieldPicker,
   MobileFieldRadio,
   MobileFieldTimePicker,
+  MobileFieldUploader,
   MobileFloatingBubble,
   MobileFloatingPanel,
   MobileForm,

package/es/packages/mobile/src/components/form/fieldUploader/FieldUploader.vue.mjs

@@ -0,0 +1,52 @@
+import { useAttrs, computed, createBlock, openBlock, unref, mergeProps, isRef, withCtx, createVNode } from "vue";
+import { MobileField } from "../field/index.mjs";
+import { MobileUploader } from "../uploader/index.mjs";
+const _sfc_main = {
+  __name: "FieldUploader",
+  props: {
+    modelValue: {
+      type: Array,
+      default: []
+    },
+    readonly: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    useAttrs();
+    const emit = __emit;
+    const compValue = computed({
+      get: () => {
+        return props.modelValue;
+      },
+      set: (val) => {
+        emit("update:modelValue", val);
+      }
+    });
+    const fieldTextValue = computed(() => {
+      return "";
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(MobileField), mergeProps(_ctx.$attrs, {
+        readonly: "",
+        modelValue: unref(fieldTextValue),
+        "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => isRef(fieldTextValue) ? fieldTextValue.value = $event : null)
+      }), {
+        input: withCtx(() => [
+          createVNode(unref(MobileUploader), mergeProps(_ctx.$attrs, {
+            readonly: __props.readonly,
+            modelValue: unref(compValue),
+            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(compValue) ? compValue.value = $event : null)
+          }), null, 16, ["readonly", "modelValue"])
+        ]),
+        _: 1
+      }, 16, ["modelValue"]);
+    };
+  }
+};
+export {
+  _sfc_main as default
+};

package/es/packages/mobile/src/components/form/fieldUploader/index.mjs

@@ -0,0 +1,10 @@
+import _sfc_main from "./FieldUploader.vue.mjs";
+import install from "../../../utils/install.mjs";
+const MobileFieldUploader = install.withInstall(
+  "MobileFieldUploader",
+  _sfc_main
+);
+export {
+  MobileFieldUploader,
+  MobileFieldUploader as default
+};

package/es/packages/mobile/src/components/form/uploader/Uploader.vue.mjs

@@ -9,7 +9,7 @@
 /* empty css                                                                                                                       */
 /* empty css                                                                                                                          */
 /* empty css                                                                                                                     */
-import { computed, createBlock, openBlock, mergeProps, unref, isRef, createSlots, withCtx, createElementBlock, createCommentVNode, createVNode, createElementVNode, toDisplayString, renderList, renderSlot } from "vue";
+import { computed, createBlock, openBlock, mergeProps, unref, isRef, createSlots, withCtx, createElementBlock, createCommentVNode, createVNode, toDisplayString, renderList, renderSlot } from "vue";
 import { useDataSource } from "../../../utils/dataSourceUtil.mjs";
 /* empty css               */
 import _export_sfc from "../../../../../../_virtual/_plugin-vue_export-helper.mjs";
@@ -17,8 +17,15 @@ import { Uploader } from "../../../../../../node_modules/.pnpm/vant@4.9.17_vue@3
 import { showToast } from "../../../../../../node_modules/.pnpm/vant@4.9.17_vue@3.5.13_typescript@5.7.3_/node_modules/vant/es/toast/function-call.mjs";
 import "../../../../../../node_modules/.pnpm/vant@4.9.17_vue@3.5.13_typescript@5.7.3_/node_modules/vant/es/toast/index.mjs";
 import { Icon } from "../../../../../../node_modules/.pnpm/vant@4.9.17_vue@3.5.13_typescript@5.7.3_/node_modules/vant/es/icon/index.mjs";
-const _hoisted_1 = { class: "preview-cover van-ellipsis" };
+const _hoisted_1 = {
+  key: 0,
+  class: "preview-cover van-ellipsis"
+};
 const _hoisted_2 = {
+  key: 1,
+  class: "preview-cover van-ellipsis"
+};
+const _hoisted_3 = {
   key: 0,
   class: "van-uploader__preview-delete--shadow"
 };
@@ -79,6 +86,9 @@ const _sfc_main = {
     });
     const accept = computed(() => {
       const acceptArr = [];
+      if (props.acceptType.includes("all")) {
+        return "";
+      }
       if (props.acceptType.includes("image")) {
         acceptArr.push("image/*");
       }
@@ -113,9 +123,7 @@ const _sfc_main = {
       return acceptArr.join(",");
     });
     const validators = {
-      image: (file) => ["image/jpeg", "image/png", "image/gif", "image/svg+xml"].includes(
-        file.type
-      ),
+      image: (file) => isImage(file),
       video: (file) => file.type.startsWith("video/"),
       audio: (file) => file.type.startsWith("audio/"),
       text: (file) => file.type === "text/plain",
@@ -125,6 +133,11 @@ const _sfc_main = {
       pdf: (file) => file.type === "application/pdf",
       zip: (file) => ["application/zip", "application/x-rar-compressed"].includes(file.type)
     };
+    const isImage = (file) => {
+      return ["image/jpeg", "image/png", "image/gif", "image/svg+xml"].includes(
+        file == null ? void 0 : file.type
+      );
+    };
     const typeChineseMap = {
       image: "图片",
       video: "视频",
@@ -137,7 +150,6 @@ const _sfc_main = {
       zip: "压缩包"
     };
     const beforeRead = (file) => {
-      console.log("🚀 ~ beforeRead:", file);
       for (const type of props.acceptType) {
         if (validators[type] && !validators[type](file)) {
           showToast(`上传的文件不是有效的${typeChineseMap[type]}`);
@@ -147,19 +159,14 @@ const _sfc_main = {
       return true;
     };
     const afterRead = (file) => {
-      console.log("🚀 ~ file:", file);
       if (!props.autoUpload) {
         return;
       }
       file.status = "uploading";
       file.message = "上传中...";
-      fileList.value.map((item) => {
-        return {
-          file: item.file
-        };
-      });
       const dataSource = useDataSource(props.dataSource);
-      dataSource == null ? void 0 : dataSource.load({ fileList: fileList.value, ...props.dataSourceParams }).then((res) => {
+      dataSource == null ? void 0 : dataSource.load({ file: file.file, ...props.dataSourceParams }).then((res) => {
+        file.status = "done";
       }).catch((err) => {
         file.status = "failed";
         file.message = "上传失败";
@@ -172,7 +179,7 @@ const _sfc_main = {
     return (_ctx, _cache) => {
       const _component_van_icon = Icon;
       const _component_van_uploader = Uploader;
-      return openBlock(), createBlock(_component_van_uploader, mergeProps(_ctx.$attrs, {
+      return openBlock(), createBlock(_component_van_uploader, mergeProps({ class: "fac-uploader" }, _ctx.$attrs, {
         modelValue: unref(fileList),
         "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(fileList) ? fileList.value = $event : null),
         accept: unref(accept),
@@ -183,11 +190,11 @@ const _sfc_main = {
         "result-type": "file",
         "preview-size": __props.previewSize + "px"
       }), createSlots({
-        "preview-cover": withCtx(({ file }) => [
-          createElementVNode("div", _hoisted_1, toDisplayString((file == null ? void 0 : file.name) || ""), 1)
+        "preview-cover": withCtx(({ file, name }) => [
+          isImage(file) ? (openBlock(), createElementBlock("div", _hoisted_1, toDisplayString((file == null ? void 0 : file.name) || ""), 1)) : name ? (openBlock(), createElementBlock("div", _hoisted_2, toDisplayString(name), 1)) : createCommentVNode("", true)
         ]),
         "preview-delete": withCtx(() => [
-          !__props.readonly ? (openBlock(), createElementBlock("div", _hoisted_2, [
+          !__props.readonly ? (openBlock(), createElementBlock("div", _hoisted_3, [
             createVNode(_component_van_icon, {
               name: "cross",
               class: "van-uploader__preview-delete-icon"
@@ -208,7 +215,7 @@ const _sfc_main = {
     };
   }
 };
-const _Uploader = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-cbd8c56a"]]);
+const _Uploader = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-f959e5af"]]);
 export {
   _Uploader as default
 };

package/es/packages/mobile/src/utils/dataSourceUtil.mjs

@@ -64,6 +64,12 @@ const createLoad = (http, dataSource, shouldFetch) => (params) => {
   } else {
     config.data = data;
   }
+  if (method.toLowerCase() === "upload") {
+    config.headers = {
+      "Content-Type": "multipart/form-data"
+    };
+    config.method = "post";
+  }
   return http.request(config);
 };
 export {

package/lib/mobile.css

@@ -89,7 +89,7 @@
 :root,:host{--van-image-preview-index-text-color: var(--van-white);--van-image-preview-index-font-size: var(--van-font-size-md);--van-image-preview-index-line-height: var(--van-line-height-md);--van-image-preview-index-text-shadow: 0 1px 1px var(--van-gray-8);--van-image-preview-overlay-background: rgba(0, 0, 0, .9);--van-image-preview-close-icon-size: 22px;--van-image-preview-close-icon-color: var(--van-gray-5);--van-image-preview-close-icon-margin: var(--van-padding-md);--van-image-preview-close-icon-z-index: 1}.van-image-preview{position:fixed;top:0;left:0;width:100%;height:100%;max-width:none;background-color:transparent;transform:none}.van-image-preview__swipe{height:100%}.van-image-preview__swipe-item{display:flex;align-items:center;justify-content:center;overflow:hidden}.van-image-preview__cover{position:absolute;top:0;left:0}.van-image-preview__image,.van-image-preview__image-wrap{width:100%;transition-property:transform}.van-image-preview__image--vertical,.van-image-preview__image-wrap--vertical{width:auto;height:100%}.van-image-preview__image img,.van-image-preview__image-wrap img,.van-image-preview__image video,.van-image-preview__image-wrap video{-webkit-user-drag:none}.van-image-preview__image .van-image__error,.van-image-preview__image-wrap .van-image__error{top:30%;height:40%}.van-image-preview__image .van-image__error-icon,.van-image-preview__image-wrap .van-image__error-icon{font-size:36px}.van-image-preview__image .van-image__loading,.van-image-preview__image-wrap .van-image__loading{background-color:transparent}.van-image-preview__index{position:absolute;top:var(--van-padding-md);left:50%;color:var(--van-image-preview-index-text-color);font-size:var(--van-image-preview-index-font-size);line-height:var(--van-image-preview-index-line-height);text-shadow:var(--van-image-preview-index-text-shadow);transform:translate(-50%)}.van-image-preview__overlay{background:var(--van-image-preview-overlay-background)}.van-image-preview__close-icon{position:absolute;z-index:var(--van-image-preview-close-icon-z-index);color:var(--van-image-preview-close-icon-color);font-size:var(--van-image-preview-close-icon-size)}.van-image-preview__close-icon--top-left{top:var(--van-image-preview-close-icon-margin);left:var(--van-image-preview-close-icon-margin)}.van-image-preview__close-icon--top-right{top:var(--van-image-preview-close-icon-margin);right:var(--van-image-preview-close-icon-margin)}.van-image-preview__close-icon--bottom-left{bottom:var(--van-image-preview-close-icon-margin);left:var(--van-image-preview-close-icon-margin)}.van-image-preview__close-icon--bottom-right{right:var(--van-image-preview-close-icon-margin);bottom:var(--van-image-preview-close-icon-margin)}
 :root,:host{--van-uploader-size: 80px;--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: 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: rgba(0, 0, 0, .7);--van-uploader-file-background: var(--van-background);--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: 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-border-radius: 0px}.van-uploader{position:relative;display:inline-block}.van-uploader__wrapper{display:flex;flex-wrap:wrap}.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);margin:0 var(--van-padding-xs) var(--van-padding-xs) 0;background:var(--van-uploader-upload-background);border-radius:var(--van-uploader-border-radius)}.van-uploader__upload:active{background-color:var(--van-uploader-upload-active-color)}.van-uploader__upload--readonly:active{background-color:var(--van-uploader-upload-background)}.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;margin:0 var(--van-padding-xs) var(--van-padding-xs) 0;cursor:pointer}.van-uploader__preview-image{display:block;width:var(--van-uploader-size);height:var(--van-uploader-size);overflow:hidden;border-radius:var(--van-uploader-border-radius)}.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);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);border-radius:var(--van-uploader-border-radius)}.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)}.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}
 
-.preview-cover[data-v-cbd8c56a] {
+.preview-cover[data-v-f959e5af] {
   position: absolute;
   bottom: 0;
   box-sizing: border-box;
@@ -99,6 +99,12 @@
   text-align: center;
   background: rgba(0, 0, 0, 0.3);
   line-height: 24px;
+}
+.fac-uploader[data-v-f959e5af] .van-uploader__upload {
+  margin: 0;
+}
+.fac-uploader[data-v-f959e5af] .van-uploader__preview {
+  margin: 0 8px 0 0;
 }
 :root,:host{--van-action-bar-background: var(--van-background-2);--van-action-bar-height: 50px}.van-action-bar{position:fixed;right:0;bottom:0;left:0;display:flex;align-items:center;box-sizing:content-box;height:var(--van-action-bar-height);background:var(--van-action-bar-background)}
 :root,:host{--van-back-top-size: 40px;--van-back-top-right: 30px;--van-back-top-bottom: 40px;--van-back-top-z-index: 100;--van-back-top-icon-size: 20px;--van-back-top-text-color: #fff;--van-back-top-background: var(--van-blue)}.van-back-top{position:fixed;display:flex;align-items:center;justify-content:center;width:var(--van-back-top-size);height:var(--van-back-top-size);right:var(--van-back-top-right);bottom:var(--van-back-top-bottom);z-index:var(--van-back-top-z-index);cursor:pointer;color:var(--van-back-top-text-color);border-radius:var(--van-radius-max);box-shadow:0 2px 8px rgba(0,0,0,.12);transform:scale(0);transition:var(--van-duration-base) cubic-bezier(.25,.8,.5,1);background-color:var(--van-back-top-background)}.van-back-top:active{opacity:var(--van-active-opacity)}.van-back-top__placeholder{display:none}.van-back-top--active{transform:scale(1)}.van-back-top__icon{font-size:var(--van-back-top-icon-size);font-weight:var(--van-font-bold)}

package/lib/packages/mobile/index.js

@@ -44,22 +44,23 @@ const index$C = require("./src/components/form/formItem/index.js");
 const index$D = require("./src/components/form/radioGroup/index.js");
 const index$E = require("./src/components/form/search/index.js");
 const index$F = require("./src/components/form/uploader/index.js");
-const index$G = require("./src/components/form/submitButton/index.js");
-const index$H = require("./src/components/navigation/actionBar/index.js");
-const index$I = require("./src/components/navigation/backTop/index.js");
-const index$J = require("./src/components/navigation/grid/index.js");
-const index$K = require("./src/components/navigation/gridItem/index.js");
-const index$L = require("./src/components/navigation/indexBar/index.js");
-const index$M = require("./src/components/navigation/indexAnchor/index.js");
-const index$N = require("./src/components/navigation/navBar/index.js");
-const index$O = require("./src/components/navigation/pagination/index.js");
-const index$P = require("./src/components/navigation/sidebar/index.js");
-const index$Q = require("./src/components/navigation/sidebarItem/index.js");
-const index$R = require("./src/components/navigation/tab/index.js");
-const index$S = require("./src/components/navigation/tabs/index.js");
-const index$T = require("./src/components/navigation/tabbar/index.js");
-const index$U = require("./src/components/navigation/tabbarItem/index.js");
-const index$V = require("./src/components/navigation/treeSelect/index.js");
+const index$G = require("./src/components/form/fieldUploader/index.js");
+const index$H = require("./src/components/form/submitButton/index.js");
+const index$I = require("./src/components/navigation/actionBar/index.js");
+const index$J = require("./src/components/navigation/backTop/index.js");
+const index$K = require("./src/components/navigation/grid/index.js");
+const index$L = require("./src/components/navigation/gridItem/index.js");
+const index$M = require("./src/components/navigation/indexBar/index.js");
+const index$N = require("./src/components/navigation/indexAnchor/index.js");
+const index$O = require("./src/components/navigation/navBar/index.js");
+const index$P = require("./src/components/navigation/pagination/index.js");
+const index$Q = require("./src/components/navigation/sidebar/index.js");
+const index$R = require("./src/components/navigation/sidebarItem/index.js");
+const index$S = require("./src/components/navigation/tab/index.js");
+const index$T = require("./src/components/navigation/tabs/index.js");
+const index$U = require("./src/components/navigation/tabbar/index.js");
+const index$V = require("./src/components/navigation/tabbarItem/index.js");
+const index$W = require("./src/components/navigation/treeSelect/index.js");
 const functionCall = require("../../node_modules/.pnpm/vant@4.9.17_vue@3.5.13_typescript@5.7.3_/node_modules/vant/es/dialog/function-call.js");
 const functionCall$1 = require("../../node_modules/.pnpm/vant@4.9.17_vue@3.5.13_typescript@5.7.3_/node_modules/vant/es/image-preview/function-call.js");
 const functionCall$2 = require("../../node_modules/.pnpm/vant@4.9.17_vue@3.5.13_typescript@5.7.3_/node_modules/vant/es/notify/function-call.js");
@@ -112,22 +113,23 @@ exports.MobileFormItem = index$C.MobileFormItem;
 exports.MobileRadioGroup = index$D.MobileRadioGroup;
 exports.MobileSearch = index$E.MobileSearch;
 exports.MobileUploader = index$F.MobileUploader;
-exports.MobileSubmitButton = index$G.MobileSubmitButton;
-exports.MobileActionBar = index$H.MobileActionBar;
-exports.MobileBackTop = index$I.MobileBackTop;
-exports.MobileGrid = index$J.MobileGrid;
-exports.MobileGridItem = index$K.MobileGridItem;
-exports.MobileIndexBar = index$L.MobileIndexBar;
-exports.MobileIndexAnchor = index$M.MobileIndexAnchor;
-exports.MobileNavBar = index$N.MobileNavBar;
-exports.MobilePagination = index$O.MobilePagination;
-exports.MobileSidebar = index$P.MobileSidebar;
-exports.MobileSidebarItem = index$Q.MobileSidebarItem;
-exports.MobileTab = index$R.MobileTab;
-exports.MobileTabs = index$S.MobileTabs;
-exports.MobileTabbar = index$T.MobileTabbar;
-exports.MobileTabbarItem = index$U.MobileTabbarItem;
-exports.MobileTreeSelect = index$V.MobileTreeSelect;
+exports.MobileFieldUploader = index$G.MobileFieldUploader;
+exports.MobileSubmitButton = index$H.MobileSubmitButton;
+exports.MobileActionBar = index$I.MobileActionBar;
+exports.MobileBackTop = index$J.MobileBackTop;
+exports.MobileGrid = index$K.MobileGrid;
+exports.MobileGridItem = index$L.MobileGridItem;
+exports.MobileIndexBar = index$M.MobileIndexBar;
+exports.MobileIndexAnchor = index$N.MobileIndexAnchor;
+exports.MobileNavBar = index$O.MobileNavBar;
+exports.MobilePagination = index$P.MobilePagination;
+exports.MobileSidebar = index$Q.MobileSidebar;
+exports.MobileSidebarItem = index$R.MobileSidebarItem;
+exports.MobileTab = index$S.MobileTab;
+exports.MobileTabs = index$T.MobileTabs;
+exports.MobileTabbar = index$U.MobileTabbar;
+exports.MobileTabbarItem = index$V.MobileTabbarItem;
+exports.MobileTreeSelect = index$W.MobileTreeSelect;
 exports.closeDialog = functionCall.closeDialog;
 exports.showConfirmDialog = functionCall.showConfirmDialog;
 exports.showDialog = functionCall.showDialog;

package/lib/packages/mobile/src/axios/config.js

@@ -99,6 +99,9 @@ const axios = () => {
     put(url, data, config) {
       return service.put(url, data, config);
     },
+    upload(url, data, config) {
+      return service.postForm(url, data, config);
+    },
     interceptors: {
       request: {
         use(fnHandle, fnError) {

package/lib/packages/mobile/src/components/all.js

@@ -41,22 +41,23 @@ const index$B = require("./form/formItem/index.js");
 const index$C = require("./form/radioGroup/index.js");
 const index$D = require("./form/search/index.js");
 const index$E = require("./form/uploader/index.js");
-const index$F = require("./form/submitButton/index.js");
-const index$G = require("./navigation/actionBar/index.js");
-const index$H = require("./navigation/backTop/index.js");
-const index$I = require("./navigation/grid/index.js");
-const index$J = require("./navigation/gridItem/index.js");
-const index$K = require("./navigation/indexBar/index.js");
-const index$L = require("./navigation/indexAnchor/index.js");
-const index$M = require("./navigation/navBar/index.js");
-const index$N = require("./navigation/pagination/index.js");
-const index$O = require("./navigation/sidebar/index.js");
-const index$P = require("./navigation/sidebarItem/index.js");
-const index$Q = require("./navigation/tab/index.js");
-const index$R = require("./navigation/tabs/index.js");
-const index$S = require("./navigation/tabbar/index.js");
-const index$T = require("./navigation/tabbarItem/index.js");
-const index$U = require("./navigation/treeSelect/index.js");
+const index$F = require("./form/fieldUploader/index.js");
+const index$G = require("./form/submitButton/index.js");
+const index$H = require("./navigation/actionBar/index.js");
+const index$I = require("./navigation/backTop/index.js");
+const index$J = require("./navigation/grid/index.js");
+const index$K = require("./navigation/gridItem/index.js");
+const index$L = require("./navigation/indexBar/index.js");
+const index$M = require("./navigation/indexAnchor/index.js");
+const index$N = require("./navigation/navBar/index.js");
+const index$O = require("./navigation/pagination/index.js");
+const index$P = require("./navigation/sidebar/index.js");
+const index$Q = require("./navigation/sidebarItem/index.js");
+const index$R = require("./navigation/tab/index.js");
+const index$S = require("./navigation/tabs/index.js");
+const index$T = require("./navigation/tabbar/index.js");
+const index$U = require("./navigation/tabbarItem/index.js");
+const index$V = require("./navigation/treeSelect/index.js");
 exports.MobileButton = index.MobileButton;
 exports.MobileCell = index$1.MobileCell;
 exports.MobileCellGroup = index$2.MobileCellGroup;
@@ -98,19 +99,20 @@ exports.MobileFormItem = index$B.MobileFormItem;
 exports.MobileRadioGroup = index$C.MobileRadioGroup;
 exports.MobileSearch = index$D.MobileSearch;
 exports.MobileUploader = index$E.MobileUploader;
-exports.MobileSubmitButton = index$F.MobileSubmitButton;
-exports.MobileActionBar = index$G.MobileActionBar;
-exports.MobileBackTop = index$H.MobileBackTop;
-exports.MobileGrid = index$I.MobileGrid;
-exports.MobileGridItem = index$J.MobileGridItem;
-exports.MobileIndexBar = index$K.MobileIndexBar;
-exports.MobileIndexAnchor = index$L.MobileIndexAnchor;
-exports.MobileNavBar = index$M.MobileNavBar;
-exports.MobilePagination = index$N.MobilePagination;
-exports.MobileSidebar = index$O.MobileSidebar;
-exports.MobileSidebarItem = index$P.MobileSidebarItem;
-exports.MobileTab = index$Q.MobileTab;
-exports.MobileTabs = index$R.MobileTabs;
-exports.MobileTabbar = index$S.MobileTabbar;
-exports.MobileTabbarItem = index$T.MobileTabbarItem;
-exports.MobileTreeSelect = index$U.MobileTreeSelect;
+exports.MobileFieldUploader = index$F.MobileFieldUploader;
+exports.MobileSubmitButton = index$G.MobileSubmitButton;
+exports.MobileActionBar = index$H.MobileActionBar;
+exports.MobileBackTop = index$I.MobileBackTop;
+exports.MobileGrid = index$J.MobileGrid;
+exports.MobileGridItem = index$K.MobileGridItem;
+exports.MobileIndexBar = index$L.MobileIndexBar;
+exports.MobileIndexAnchor = index$M.MobileIndexAnchor;
+exports.MobileNavBar = index$N.MobileNavBar;
+exports.MobilePagination = index$O.MobilePagination;
+exports.MobileSidebar = index$P.MobileSidebar;
+exports.MobileSidebarItem = index$Q.MobileSidebarItem;
+exports.MobileTab = index$R.MobileTab;
+exports.MobileTabs = index$S.MobileTabs;
+exports.MobileTabbar = index$T.MobileTabbar;
+exports.MobileTabbarItem = index$U.MobileTabbarItem;
+exports.MobileTreeSelect = index$V.MobileTreeSelect;

package/lib/packages/mobile/src/components/form/fieldUploader/FieldUploader.vue.js

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const vue = require("vue");
+const index = require("../field/index.js");
+const index$1 = require("../uploader/index.js");
+const _sfc_main = {
+  __name: "FieldUploader",
+  props: {
+    modelValue: {
+      type: Array,
+      default: []
+    },
+    readonly: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    vue.useAttrs();
+    const emit = __emit;
+    const compValue = vue.computed({
+      get: () => {
+        return props.modelValue;
+      },
+      set: (val) => {
+        emit("update:modelValue", val);
+      }
+    });
+    const fieldTextValue = vue.computed(() => {
+      return "";
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createBlock(vue.unref(index.MobileField), vue.mergeProps(_ctx.$attrs, {
+        readonly: "",
+        modelValue: vue.unref(fieldTextValue),
+        "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => vue.isRef(fieldTextValue) ? fieldTextValue.value = $event : null)
+      }), {
+        input: vue.withCtx(() => [
+          vue.createVNode(vue.unref(index$1.MobileUploader), vue.mergeProps(_ctx.$attrs, {
+            readonly: __props.readonly,
+            modelValue: vue.unref(compValue),
+            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => vue.isRef(compValue) ? compValue.value = $event : null)
+          }), null, 16, ["readonly", "modelValue"])
+        ]),
+        _: 1
+      }, 16, ["modelValue"]);
+    };
+  }
+};
+exports.default = _sfc_main;

package/lib/packages/mobile/src/components/form/fieldUploader/index.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const FieldUploader = require("./FieldUploader.vue.js");
+const install = require("../../../utils/install.js");
+const MobileFieldUploader = install.default.withInstall(
+  "MobileFieldUploader",
+  FieldUploader.default
+);
+exports.MobileFieldUploader = MobileFieldUploader;
+exports.default = MobileFieldUploader;

package/lib/packages/mobile/src/components/form/uploader/Uploader.vue.js

@@ -19,8 +19,15 @@ const index = require("../../../../../../node_modules/.pnpm/vant@4.9.17_vue@3.5.
 const functionCall = require("../../../../../../node_modules/.pnpm/vant@4.9.17_vue@3.5.13_typescript@5.7.3_/node_modules/vant/es/toast/function-call.js");
 require("../../../../../../node_modules/.pnpm/vant@4.9.17_vue@3.5.13_typescript@5.7.3_/node_modules/vant/es/toast/index.js");
 const index$1 = require("../../../../../../node_modules/.pnpm/vant@4.9.17_vue@3.5.13_typescript@5.7.3_/node_modules/vant/es/icon/index.js");
-const _hoisted_1 = { class: "preview-cover van-ellipsis" };
+const _hoisted_1 = {
+  key: 0,
+  class: "preview-cover van-ellipsis"
+};
 const _hoisted_2 = {
+  key: 1,
+  class: "preview-cover van-ellipsis"
+};
+const _hoisted_3 = {
   key: 0,
   class: "van-uploader__preview-delete--shadow"
 };
@@ -81,6 +88,9 @@ const _sfc_main = {
     });
     const accept = vue.computed(() => {
       const acceptArr = [];
+      if (props.acceptType.includes("all")) {
+        return "";
+      }
       if (props.acceptType.includes("image")) {
         acceptArr.push("image/*");
       }
@@ -115,9 +125,7 @@ const _sfc_main = {
       return acceptArr.join(",");
     });
     const validators = {
-      image: (file) => ["image/jpeg", "image/png", "image/gif", "image/svg+xml"].includes(
-        file.type
-      ),
+      image: (file) => isImage(file),
       video: (file) => file.type.startsWith("video/"),
       audio: (file) => file.type.startsWith("audio/"),
       text: (file) => file.type === "text/plain",
@@ -127,6 +135,11 @@ const _sfc_main = {
       pdf: (file) => file.type === "application/pdf",
       zip: (file) => ["application/zip", "application/x-rar-compressed"].includes(file.type)
     };
+    const isImage = (file) => {
+      return ["image/jpeg", "image/png", "image/gif", "image/svg+xml"].includes(
+        file == null ? void 0 : file.type
+      );
+    };
     const typeChineseMap = {
       image: "图片",
       video: "视频",
@@ -139,7 +152,6 @@ const _sfc_main = {
       zip: "压缩包"
     };
     const beforeRead = (file) => {
-      console.log("🚀 ~ beforeRead:", file);
       for (const type of props.acceptType) {
         if (validators[type] && !validators[type](file)) {
           functionCall.showToast(`上传的文件不是有效的${typeChineseMap[type]}`);
@@ -149,19 +161,14 @@ const _sfc_main = {
       return true;
     };
     const afterRead = (file) => {
-      console.log("🚀 ~ file:", file);
       if (!props.autoUpload) {
         return;
       }
       file.status = "uploading";
       file.message = "上传中...";
-      fileList.value.map((item) => {
-        return {
-          file: item.file
-        };
-      });
       const dataSource = dataSourceUtil.useDataSource(props.dataSource);
-      dataSource == null ? void 0 : dataSource.load({ fileList: fileList.value, ...props.dataSourceParams }).then((res) => {
+      dataSource == null ? void 0 : dataSource.load({ file: file.file, ...props.dataSourceParams }).then((res) => {
+        file.status = "done";
       }).catch((err) => {
         file.status = "failed";
         file.message = "上传失败";
@@ -174,7 +181,7 @@ const _sfc_main = {
     return (_ctx, _cache) => {
       const _component_van_icon = index$1.Icon;
       const _component_van_uploader = index.Uploader;
-      return vue.openBlock(), vue.createBlock(_component_van_uploader, vue.mergeProps(_ctx.$attrs, {
+      return vue.openBlock(), vue.createBlock(_component_van_uploader, vue.mergeProps({ class: "fac-uploader" }, _ctx.$attrs, {
         modelValue: vue.unref(fileList),
         "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => vue.isRef(fileList) ? fileList.value = $event : null),
         accept: vue.unref(accept),
@@ -185,11 +192,11 @@ const _sfc_main = {
         "result-type": "file",
         "preview-size": __props.previewSize + "px"
       }), vue.createSlots({
-        "preview-cover": vue.withCtx(({ file }) => [
-          vue.createElementVNode("div", _hoisted_1, vue.toDisplayString((file == null ? void 0 : file.name) || ""), 1)
+        "preview-cover": vue.withCtx(({ file, name }) => [
+          isImage(file) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, vue.toDisplayString((file == null ? void 0 : file.name) || ""), 1)) : name ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, vue.toDisplayString(name), 1)) : vue.createCommentVNode("", true)
         ]),
         "preview-delete": vue.withCtx(() => [
-          !__props.readonly ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
+          !__props.readonly ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3, [
             vue.createVNode(_component_van_icon, {
               name: "cross",
               class: "van-uploader__preview-delete-icon"
@@ -210,5 +217,5 @@ const _sfc_main = {
     };
   }
 };
-const _Uploader = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["__scopeId", "data-v-cbd8c56a"]]);
+const _Uploader = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["__scopeId", "data-v-f959e5af"]]);
 exports.default = _Uploader;

package/lib/packages/mobile/src/utils/dataSourceUtil.js

@@ -66,6 +66,12 @@ const createLoad = (http, dataSource, shouldFetch) => (params) => {
   } else {
     config.data = data;
   }
+  if (method.toLowerCase() === "upload") {
+    config.headers = {
+      "Content-Type": "multipart/form-data"
+    };
+    config.method = "post";
+  }
   return http.request(config);
 };
 exports.useDataSource = useDataSource;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fecp/mobile",
-  "version": "1.0.54",
+  "version": "1.0.56",
   "main": "lib/packages/mobile/index.js",
   "module": "es/packages/mobile/index.mjs",
   "files": [