✨(component): 调整 upload 文档, 简化 demo

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

@@ -17,7 +17,7 @@ import {
   ref,
   useSlots,
   withDefaults,
-  watch,
+  watch
 } from "vue";
 import { templateRef } from "@vueuse/core";
 import { LayLayer } from "@layui/layer-vue";
@@ -172,6 +172,7 @@ const slots = slot.default && slot.default();
 const context = getCurrentInstance();
 const emit = defineEmits([
   "choose",
+  "chooseAfter",
   "before",
   "done",
   "error",
@@ -193,8 +194,8 @@ const isDragEnter = ref(false);
 const activeUploadFiles = ref<any[]>([]);
 const activeUploadFilesImgs = ref<any[]>([]);
 const orgFileInput = templateRef<HTMLElement>("orgFileInput");
-let _cropper: any = null;
 
+let _cropper: any = null;
 let computedCutLayerOption: ComputedRef<LayerModal>;
 
 if (props.cutOptions && props.cutOptions.layerOption) {
@@ -269,9 +270,8 @@ const errorF = (errorText: string) => {
 };
 
 const localUpload = (option: localUploadOption, callback: Function) => {
-  let xhr: XMLHttpRequest, url;
+  let xhr: XMLHttpRequest = new XMLHttpRequest();
-  xhr = new XMLHttpRequest();
+  let url = option.url;
-  url = option.url;
   let formData = option.formData;
   const cb = callback;
   xhr.onreadystatechange = function () {
@@ -352,6 +352,7 @@ const uploadChange = (e: any) => {
     props.cut &&
     props.acceptMime.indexOf("image") != -1 &&
     props.multiple == false;
+
   let arm2 =
     props.cut &&
     props.acceptMime.indexOf("image") != -1 &&

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

@@ -151,6 +151,7 @@ export default {
 ::: demo
 
 <template>
+{{ validateModel }}
   <lay-form :model="validateModel" ref="layFormRef" required>
     <lay-form-item label="账户" prop="username">
       <lay-input v-model="validateModel.username"></lay-input>
@@ -174,10 +175,10 @@ export default {
       <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" acceptMime="images" :auto="false"/>
+      <lay-upload v-model="validateModel.file" acceptMime="image/*" :auto="false"/>
     </lay-form-item>
     <lay-form-item>
-      <lay-button @click="validate">提交</lay-button>
+      <lay-button @click="validate3">提交</lay-button>
       <lay-button @click="clearValidate">清除校验</lay-button>
       <lay-button @click="reset">重置表单</lay-button>
     </lay-form-item>
@@ -201,8 +202,9 @@ export default {
 
     const layFormRef = ref(null);
     // 校验
-    const validate = function() {
+    const validate3= function() {
       layFormRef.value.validate((isValidate, model, errors) => {
+          console.log(JSON.stringify(model.file))
          layer.open({
           type: 1,
           title:"表单提交结果", 
@@ -229,7 +231,7 @@ export default {
     return {
       validateModel,
       layFormRef,
-      validate,
+      validate3,
       clearValidate,
       reset
     }

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

@@ -13,11 +13,9 @@
 ::: demo 使用 `lay-upload` 标签, 创建一个上传按钮
 
 <template>
-  <lay-upload url="https://www.mocky.io/v2/5cc8019d300000980a055e76" @done="doneHandle" field="bigFile" @choose="beginChoose">
+  <lay-upload url="https://www.mocky.io/v2/5cc8019d300000980a055e76" field="file" @done="doneHandle">
     <template #preview>
-      <div v-for="(item,index) in picList" :key="`demo1-pic-'${index}`">
+      <img v-if="data" :src="data.url" style="width: 100px;"/>
-        <img :src="item"/>
-      </div>
     </template>
   </lay-upload>
 </template>
@@ -27,34 +25,47 @@ import { ref,reactive } from 'vue'
 
 export default {
   setup() {
-    const picList = ref([]);
+
-    const filetoDataURL=(file,fn)=>{
+    const data = ref();
-      const reader = new FileReader();
+
-      reader.onloadend = function(e){
+    const doneHandle = (result) => {
-        fn(e.target.result);
+      data.value = JSON.parse(result.data);
-      };
+      console.log(data.value.url)
-      reader.readAsDataURL(file);
-    };
-    const doneHandle=(files)=>{
-      console.log("触发")
-      if(Array.isArray(files)&&files.length>0){
-        files.forEach((file,index,array)=>{
-          filetoDataURL(file,(res)=>{
-            console.log(res);
-            picList.value.push(res);
-            console.log(picList.value);
-          });
-        });
-      }
-    };
-    const beginChoose =(e)=>{
-      console.log("beginChoose",e);
     };
+
     return {
       doneHandle,
-      filetoDataURL,
+      data
-      beginChoose,
+    }
-      picList
+  }
+}
+</script>
+
+:::
+
+::: title 手动上传
+:::
+
+::: demo 使用 `lay-upload` 标签, 创建一个上传按钮
+
+<template>
+  <lay-upload url="https://www.mocky.io/v2/5cc8019d300000980a055e76" v-model="file1" field="file" :auto="false">
+    <template #preview>
+      {{ file1 }}
+    </template>
+  </lay-upload>
+</template>
+
+<script>
+import { ref,reactive } from 'vue'
+
+export default {
+  setup() {
+
+    const file1 = ref();
+
+    return {
+      file1
     }
   }
 }