From 4ea5de0c9a3c61d8312c80fd26843e41343a4067 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=B1=E7=9C=A0=E5=84=80=E5=BC=8F?= <854085467@qq.com>
Date: Mon, 14 Nov 2022 10:14:21 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(component):=20=E8=B0=83=E6=95=B4=20up?=
 =?UTF-8?q?load=20=E6=96=87=E6=A1=A3,=20=E7=AE=80=E5=8C=96=20demo?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../component/src/component/upload/index.vue  | 11 +--
 .../src/document/zh-CN/components/form.md     | 10 +--
 .../src/document/zh-CN/components/upload.md   | 69 +++++++++++--------
 3 files changed, 52 insertions(+), 38 deletions(-)

diff --git a/package/component/src/component/upload/index.vue b/package/component/src/component/upload/index.vue
index b9d4fef9..abd47dad 100644
--- a/package/component/src/component/upload/index.vue
+++ b/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;
-  xhr = new XMLHttpRequest();
-  url = option.url;
+  let xhr: XMLHttpRequest = new XMLHttpRequest();
+  let 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 &&
diff --git a/package/document-component/src/document/zh-CN/components/form.md b/package/document-component/src/document/zh-CN/components/form.md
index 637b56bd..c06e2249 100644
--- a/package/document-component/src/document/zh-CN/components/form.md
+++ b/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
     }
diff --git a/package/document-component/src/document/zh-CN/components/upload.md b/package/document-component/src/document/zh-CN/components/upload.md
index dc4f1b76..01a8c5f4 100644
--- a/package/document-component/src/document/zh-CN/components/upload.md
+++ b/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 :src="item"/>
-      </div>
+      <img v-if="data" :src="data.url" style="width: 100px;"/>
     </template>
   </lay-upload>
 </template>
@@ -27,34 +25,47 @@ import { ref,reactive } from 'vue'
 
 export default {
   setup() {
-    const picList = ref([]);
-    const filetoDataURL=(file,fn)=>{
-      const reader = new FileReader();
-      reader.onloadend = function(e){
-        fn(e.target.result);
-      };
-      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);
+
+    const data = ref();
+
+    const doneHandle = (result) => {
+      data.value = JSON.parse(result.data);
+      console.log(data.value.url)
     };
+
     return {
       doneHandle,
-      filetoDataURL,
-      beginChoose,
-      picList
+      data
+    }
+  }
+}
+</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
     }
   }
 }