♻️: ♻️: ♻️: 重构upload支持跟随form组件提交,补充在文档的示例

package/component/src/component/upload/index.vue

@@ -17,6 +17,7 @@ import {
   ref,
   useSlots,
   withDefaults,
+  watch,
 } from "vue";
 import { templateRef } from "@vueuse/core";
 import { LayLayer } from "@layui/layer-vue";
@@ -70,6 +71,7 @@ export interface UploadProps {
   cutOptions?: CutOptions;
   text?: string;
   dragText?: string;
+  modelValue?: any;
 }
 
 const getCutDownResult = () => {
@@ -83,6 +85,11 @@ const getCutDownResult = () => {
       Object.assign({ currentTimeStamp, cutResult: imgData, orginal: orgInfo })
     );
     let newFile = dataURLtoFile(imgData);
+    if (isInFormItem.value) {
+      emit("update:modelValue", [newFile]);
+      clearLightCutEffect();
+      return;
+    }
     commonUploadTransaction([newFile]);
     nextTick(() => clearAllCutEffect());
   } else {
@@ -104,6 +111,13 @@ const clearAllCutEffect = () => {
   _cropper = null;
 };
 
+const clearLightCutEffect = () => {
+  activeUploadFiles.value = [];
+  activeUploadFilesImgs.value = [];
+  innerCutVisible.value = false;
+  _cropper = null;
+};
+
 const { t } = useI18n();
 const text = computed(() => {
   return props.text ? props.text : t("upload.text");
@@ -148,6 +162,7 @@ const props = withDefaults(defineProps<UploadProps>(), {
   disabledPreview: false,
   cut: false,
   cutOptions: void 0,
+  modelValue: null,
 });
 
 const slot = useSlots();
@@ -160,8 +175,21 @@ const emit = defineEmits([
   "error",
   "cutdone",
   "cutcancel",
+  "update:modelValue",
 ]);
 
+const isInFormItem = computed(() => context?.parent?.type.name === 'LayFormItem');
+
+watch(
+  () => props.modelValue,
+  () => {
+    if (!props.modelValue) {
+      clearAllCutEffect();
+    }
+  }
+);
+
+
 const isDragEnter = ref(false);
 const activeUploadFiles = ref<any[]>([]);
 const activeUploadFilesImgs = ref<any[]>([]);
@@ -219,7 +247,7 @@ const localUploadTransaction = (option: localUploadTransaction) => {
 
 const dataURLtoFile = (dataurl: string) => {
   let arr: any[] = dataurl.split(",");
-  let mime: string = "";
+  let mime = "";
   if (arr.length > 0) {
     mime = arr[0].match(/:(.*?);/)[1];
   }
@@ -323,12 +351,13 @@ const uploadChange = (e: any) => {
   }
   let arm1 =
     props.cut &&
-    props.acceptMime.indexOf("image") != -1 &&
+    (props.acceptMime.indexOf("image") != -1 || isInFormItem.value) &&
     props.multiple == false;
   let arm2 =
     props.cut &&
-    props.acceptMime.indexOf("image") != -1 &&
+    (props.acceptMime.indexOf("image") != -1 || isInFormItem.value) &&
     props.multiple == true;
+  
   if (arm1) {
     innerCutVisible.value = true;
     setTimeout(() => {
@@ -347,6 +376,10 @@ const uploadChange = (e: any) => {
     if (arm2) {
       console.warn(cannotSupportCutMsg.value);
     }
+    if (isInFormItem.value) {
+      emit("update:modelValue", _files);
+      return;
+    }
     commonUploadTransaction(_files);
   }
 };

package/document-component/src/document/zh-CN/components/form.md

@@ -173,6 +173,9 @@ export default {
     <lay-form-item label="描述" prop="desc">
       <lay-textarea placeholder="请输入描述" v-model="validateModel.desc"></lay-textarea>
     </lay-form-item>
+    <lay-form-item label="文件" prop="file">
+      <lay-upload v-model="validateModel.file" :cut="true"/>
+    </lay-form-item>
     <lay-form-item>
       <lay-button @click="validate">提交</lay-button>
       <lay-button @click="clearValidate">清除校验</lay-button>
@@ -192,7 +195,8 @@ export default {
         username: "",
         password: "",
         specialty: "1",
-        hobbys: ""
+        hobbys: "",
+        file: null,
     })
 
     const layFormRef = ref(null);