From 7d2fc5f1ce9767b7d931fbb73cb2b267b6e8b219 Mon Sep 17 00:00:00 2001
From: lockingreal <1191515088@qq.com>
Date: Sun, 27 Mar 2022 17:54:37 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E9=87=8D=E6=9E=84upload=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 example/docs/zh-CN/components/upload.md | 314 +++++-------------------
 example/src/router/zh-CN.ts             |   6 +
 example/src/view/utils/menus.ts         |   6 +
 src/component/upload/index.less         |  18 +-
 src/component/upload/index.vue          | 248 ++++++++++++-------
 src/index.ts                            |   3 +
 6 files changed, 254 insertions(+), 341 deletions(-)

diff --git a/example/docs/zh-CN/components/upload.md b/example/docs/zh-CN/components/upload.md
index 9a8795fc..e87316ca 100644
--- a/example/docs/zh-CN/components/upload.md
+++ b/example/docs/zh-CN/components/upload.md
@@ -13,7 +13,7 @@
 ::: demo 使用 `lay-upload` 标签, 创建一个按钮上传单文件
 
 <template>
-  <lay-upload></lay-upload>
+  <lay-upload @done="getUploadFile"/>
 </template>
 
 <script>
@@ -21,7 +21,32 @@ import { ref } from 'vue'
 
 export default {
   setup() {
+    const getUploadFile = (file)=>{
+      console.log(file);
+    };
+    return {
+      getUploadFile
+    }
+  }
+}
+</script>
 
+:::
+
+::: title 多文件上传
+:::
+
+::: demo 使用 `lay-upload` 标签, 并使用 `multiple` 创建一个可上传多个文件的上传组件
+
+<template>
+  <lay-upload :multiple="true"></lay-upload>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
     return {
     }
   }
@@ -30,7 +55,7 @@ export default {
 
 :::
 
-::: title 简约按钮
+::: title 拖拽上传
 :::
 
 ::: demo 使用 `lay-upload` 标签, 使用 `drag属性` 创建一个可拖拽的上传文件域
@@ -53,292 +78,87 @@ export default {
 
 :::
 
-<!-- ::: title 按钮尺寸
+::: title 自定义预览
 :::
 
-::: demo 使用 `size` 属性, 创建指定尺寸的按钮, 可选值 `lg` `sm` `xs`
+::: demo 使用 `lay-upload` 标签, 使用 `#preview` 自定义预览的UI交互
 
 <template>
-  <lay-button type="primary" size="lg">原始按钮</lay-button>
-  <lay-button type="default" size="lg">默认按钮</lay-button>
-  <lay-button type="normal" size="lg">百搭按钮</lay-button>
-  <lay-button type="warm" size="lg">暖色按钮</lay-button>
-  <lay-button type="danger" size="lg">警告按钮</lay-button>
-  <lay-button type="disabled" size="lg">禁用按钮</lay-button>
+  <lay-upload @done="getUploadFile">
+    <template #preview>
+      <div class="easy-wrap">
+        <img src="https://chixian.oss-cn-hangzhou.aliyuncs.com/20211023003617_0706a.jpg" style="width:62.9px;height:63.2px"/>
+        <img src="https://chixian.oss-cn-hangzhou.aliyuncs.com/20211023003617_0706a.jpg" style="width:62.9px;height:63.2px"/>
+        <img src="https://chixian.oss-cn-hangzhou.aliyuncs.com/20211023003617_0706a.jpg" style="width:62.9px;height:63.2px"/>
+        <img src="https://chixian.oss-cn-hangzhou.aliyuncs.com/20211023003617_0706a.jpg" style="width:62.9px;height:63.2px"/>
+        <img src="https://chixian.oss-cn-hangzhou.aliyuncs.com/20211023003617_0706a.jpg" style="width:62.9px;height:63.2px"/>
+      </div>
+    </template>
+  </lay-upload>
 </template>
 
 <script>
 import { ref } from 'vue'
-
 export default {
-  setup() {
-
-    return {
-    }
-  }
+  setup() {
+    const getUploadFile = (file)=>{
+      console.log(file);
+    };
+    return {
+      getUploadFile
+    }
+  }
 }
 </script>
 
 :::
 
-::: title 流式按钮
-:::
-
-::: demo 使用 `fluid` 属性, 创建最大化按钮
-
-<template>
-  <lay-button type="primary" fluid>最大化按钮</lay-button>
-  <br/>
-  <br/>
-  <lay-button type="default" fluid>最大化按钮</lay-button>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-
-    return {
-    }
-  }
-}
-</script>
-
-:::
-
-::: title 圆角按钮
-:::
-
-::: demo 使用 `radius` 属性，创建圆角按钮
-
-<template>
-  <lay-button type="primary" radius>原始按钮</lay-button>
-  <lay-button type="default" radius>默认按钮</lay-button>
-  <lay-button type="normal" radius>百搭按钮</lay-button>
-  <lay-button type="warm" radius>暖色按钮</lay-button>
-  <lay-button type="danger" radius>警告按钮</lay-button>
-  <lay-button disabled radius>禁用按钮</lay-button>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-
-    return {
-    }
-  }
-}
-</script>
-
-:::
-
-::: title 按钮分组
-:::
-
-::: demo 使用 `lay-button-group` 标签, 创建一个按钮组
-
-<template>
-  <div>
-    <lay-button-group>
-      <lay-button type="default">默认按钮</lay-button>
-      <lay-button type="default">默认按钮</lay-button>
-      <lay-button type="default">默认按钮</lay-button>
-    </lay-button-group>
-    <lay-button-group>
-      <lay-button type="primary">默认按钮</lay-button>
-      <lay-button type="primary">默认按钮</lay-button>
-      <lay-button type="primary">默认按钮</lay-button>
-    </lay-button-group>
-  </div>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-
-    return {
-    }
-  }
-}
-</script>
-
-:::
-
-::: title 图标按钮
-:::
-
-::: demo 结合 `lay-icon` 组件, 创建图标按钮
-
-<template>
-  <lay-button-container>
-      <lay-button type="primary"><lay-icon type="layui-icon-left"></lay-icon></lay-button>
-      <lay-button type="primary"><lay-icon type="layui-icon-right"></lay-icon></lay-button>
-  </lay-button-container>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-
-    return {
-    }
-  }
-}
-</script>
-
-:::
-
-::: title 按钮容器
-:::
-
-::: demo 尽管按钮在同节点并排时会自动拉开间距，但在按钮太多的情况，效果并不是很美好。因为你需要用到按钮容器
-
-<template>
-  <lay-button-container>
-      <lay-button type="default">新增</lay-button>
-      <lay-button type="default">删除</lay-button>
-      <lay-button type="default">修改</lay-button>
-  </lay-button-container>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-
-    return {
-    }
-  }
-}
-</script>
-
-:::
-
-::: title 加载按钮
-:::
-
-::: demo 使用 `loading` 属性, 控制按钮的加载状态
-
-<template>
-  <lay-button-container>
-      <lay-button type="default" :loading="loadState">加载</lay-button>
-      <lay-switch v-model="loadState"></lay-switch>
-  </lay-button-container>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-
-    const loadState = ref(true)
-
-    return {
-      loadState
-    }
-  }
-}
-</script>
-
-:::
-
-::: title 事件处理
-:::
-
-::: demo 使用 `@click` 设置单击回调
-
-<template>
-  <lay-button type="default" @click="clickHandle">单击事件</lay-button>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-    
-    const clickHandle = () => {
-      console.log('点击事件')
-    }
-
-    return {
-      clickHandle
-    }
-  }
-}
-</script>
-
-:::
-
-::: title Button 变量
-:::
-
-```
-
-```
-
-::: title Button 属性
+::: title Upload 属性
 :::
 
 ::: table
 
 | 属性        | 描述     | 类型    | 默认值    | 可选值                             |
 | ----------- | -------- | ------- | --------- | ---------------------------------- |
-| type        | 主题     | string  | `primary` | `primary` `normal` `warm` `danger` |
-| size        | 尺寸     | string  | --        | `lg` `sm` `xs`                     |
-| fluid       | 最大化   | boolean | `false`   | `true` `false`                     |
-| radius      | 圆角     | boolean | `false`   | `true` `false`                     |
-| border      | 边框     | string  | `green`   | `green` `blue` `orange` `red`      |
-| disabled    | 禁用     | boolean | `false`   | `true` `false`                     |
-| loading     | 加载     | boolean | `false`   | `true` `false`                     |
-| native-type | 原生类型 | string  | `button`  | `button` `submit` `reset`          |
+| url        | 服务端上传接口，返回的数据规范请详见下文     | string  | --        | -- |
+| data      | 请求上传接口的额外参数   | object | --   | --                  |
+| headers      | 接口的请求头     | object | -- | --                   |
+| acceptMime    | 文件选择框时的可选文件类型 | string | `images`   | `images` |
+| field    | 设定文件域的字段名     | string | `file`   | -- |
+| size | 设置文件最大可允许上传的大小，单位 KB。不支持ie8/9 | number  | `0(不限制)`  | -- |
+| multiple | 是否允许多文件上传。设置 true即可开启。不支持ie8/9 | boolean  | false  | -- |
+| number | 设置同时可上传的文件数量，一般配合 multiple 参数出现。 | number  | `0(不限制)`  | -- |
+| drag | 是否接受拖拽的文件上传，设置 false 可禁用。不支持ie8/9 | boolean  | true  | -- |
 
 :::
 
-::: title Button 插槽
+::: title Upload 插槽
 :::
 
 ::: table
 
 | 名称    | 描述     | 参数 |
 | ------- | -------- | ---- |
-| default | 默认内容 | --   |
+| preview | 自定义预览效果 | --   |
 
 :::
 
-::: title Button Group 属性
+::: title Upload 事件
 :::
 
 ::: table
 
-| 属性 | 描述 | 类型 | 默认值 | 可选值 |
-| ---- | ---- | ---- | ------ | ------ |
-| -    | -    | -    | -      |
-
-:::
-
-::: title Button Group 插槽
-:::
-
-::: table
-
-| 事件    | 描述     | 参数 |
+| 名称    | 描述     | 参数 |
 | ------- | -------- | ---- |
-| default | 默认内容 | --   |
+| choose | 打开系统选择文件窗体的回调 | --   |
+| before | 上传事务开启前的回调 | --   |
+| done | 上传事务结束的回调 | --   |
+| error | 上传事务中出现错误的回调 | --   |
 
 :::
 
+
 ::: comment
 :::
 
 ::: previousNext button
-::: -->
diff --git a/example/src/router/zh-CN.ts b/example/src/router/zh-CN.ts
index 595630ac..942584b6 100644
--- a/example/src/router/zh-CN.ts
+++ b/example/src/router/zh-CN.ts
@@ -297,6 +297,12 @@ const zhCN = [
               import("../../docs/zh-CN/components/datePicker.md"),
             meta: { title: "日期选择器" },
           },
+          {
+            path: "/zh-CN/components/upload",
+            component: () =>
+              import("../../docs/zh-CN/components/upload.md"),
+            meta: { title: "文件上传" },
+          },
           {
             path: "/zh-CN/components/layer",
             component: () => import("../../docs/zh-CN/components/layer.md"),
diff --git a/example/src/view/utils/menus.ts b/example/src/view/utils/menus.ts
index e5a667aa..aaea3ab1 100644
--- a/example/src/view/utils/menus.ts
+++ b/example/src/view/utils/menus.ts
@@ -176,6 +176,12 @@ const menus = [
         subTitle: "datePicker",
         path: "/zh-CN/components/datePicker",
       },
+      {
+        id: 40,
+        title: "文件上传",
+        subTitle: "upload",
+        path: "/zh-CN/components/upload",
+      },
       {
         id: 29,
         title: "图标选择器",
diff --git a/src/component/upload/index.less b/src/component/upload/index.less
index f3f08fbd..97376e5f 100644
--- a/src/component/upload/index.less
+++ b/src/component/upload/index.less
@@ -1,11 +1,17 @@
 @import "../../theme/variable.less";
 
 .layui-upload-file {
-  display: none !important;
+  // display: none !important;
   opacity: 0.01;
+  position: relative;
   filter: Alpha(opacity=1);
+  cursor: pointer;
+  
+}
+.layui-upload-btn-box{
+  position:relative;
+  overflow: hidden;
 }
-
 .layui-upload-drag,
 .layui-upload-form,
 .layui-upload-wrap {
@@ -44,6 +50,9 @@
 .layui-upload-drag[lay-over] {
   border-color: @global-primary-color;
 }
+.layui-upload-drag-draging{
+  border-color: @global-primary-color;
+}
 
 .layui-upload-iframe {
   position: absolute;
@@ -56,6 +65,7 @@
 .layui-upload-wrap {
   position: relative;
   vertical-align: middle;
+  cursor: pointer;
 }
 
 .layui-upload-wrap .layui-upload-file {
@@ -65,8 +75,8 @@
   top: 0;
   z-index: 10;
   font-size: 100px;
-  width: 100%;
-  height: 100%;
+  width: 1px;
+  height: 1px;
   opacity: 0.01;
   filter: Alpha(opacity=1);
   cursor: pointer;
diff --git a/src/component/upload/index.vue b/src/component/upload/index.vue
index 7312e6a9..e75d1285 100644
--- a/src/component/upload/index.vue
+++ b/src/component/upload/index.vue
@@ -6,121 +6,190 @@ export default {
 <script lang="ts" setup>
 import "./index.less";
 import { Recordable } from "../../types";
-import { ref, watch, useSlots, withDefaults, onMounted } from "vue";
+import { layer } from "@layui/layer-vue";
+import { ref, useSlots, withDefaults, onMounted, defineExpose } from "vue";
+import { templateRef } from '@vueuse/core'
+
+// 组件的参数字段类型
 //https://www.layuiweb.com/doc/modules/upload.html#options
 export interface LayUploadProps {
-  elem?: string | HTMLElement;
   url?: string;
-  data?: Recordable;
+  data?: any;
   headers?: Recordable;
-  accept?: "images" | "file" | "video" | "audio";
   acceptMime?: "images" | "file" | "video" | "audio";
-  exts?: "jpg" | "png" | "gif" | "bmp" | "jpeg";
-  auto?: boolean;
-  bindAction?: string | HTMLElement;
   field?: string;
   size?: number;
   multiple?: boolean;
   number: number;
   drag?: boolean;
 }
+
 const props = withDefaults(defineProps<LayUploadProps>(), {
-  accept: "images",
   acceptMime: "images",
-  auto: true,
   field: "file",
   size: 0,
   multiple: false,
   number: 0,
   drag: false,
 });
-
-const emit = defineEmits(["choose", "before", "done", "error"]);
-
 const slot = useSlots();
 const slots = slot.default && slot.default();
+const emit = defineEmits(["choose", "before", "done", "error"]);
+
+// 内部变量
 const isDragEnter = ref(false);
 
+const orgFileInput = templateRef<HTMLElement>('orgFileInput')
+// 统一异常提示的常量
+const defaultErrorMsg = "上传失败";
+const urlErrorMsg = "上传地址格式不合法";
+const numberErrorMsg = "文件上传超过规定的个数";
+const sizeErrorMsg = "文件大小超过限制";
+const uploadRemoteErrorMsg = "请求上传接口出现异常";
+const uploadSuccess = "上传成功";
+
+//内部方法 -> start
+//文件上传事务流程的方法参数类型
+interface localUploadTransaction {
+  url: string;
+  files: File[] | Blob[];
+  [propMame: string]: any;
+}
+const localUploadTransaction = (option: localUploadTransaction) => {
+  const { url, files } = option;
+  let formData = new FormData();
+  if (url.length <= 5) {
+    errorF(urlErrorMsg);
+    return;
+  }
+  if (Array.isArray(files) && files.length > 0) {
+    for (let i = 0; i < files.length; i++) {
+      let _file = files[i];
+      formData.append("file[" + i + "]", _file);
+    }
+    // 对应Upload属性的data字段,额外的上传参数
+    if (props.data && props.data instanceof Object) {
+      let _requestDate = props.data;
+      for (const key in _requestDate) {
+        formData.append(key, _requestDate[key]);
+      }
+    }
+    let utimer = window.setTimeout(()=>{
+      localUpload({ url,formData },function(){
+        clearTimeout(utimer);
+      });
+    },200)
+  }
+};
+
+//单文件上传的方法参数类型
 interface localUploadOption {
   url: string;
-  file?: unknown;
-  otherRequestData?: any;
+  [propMame: string]: any;
 }
 
-const localUpload = (option: any) => {
-  let file,
-    formData,
-    xhr: XMLHttpRequest,
-    loadedevt,
-    total,
-    per: number,
-    url,
-    uploading;
-  formData = new FormData();
+const errorF = (errorText: string) => {
+  let currentTimeStamp = (new Date()).valueOf();
+  let errorMsg = errorText ? errorText : defaultErrorMsg;
+  errorMsg = `layui-vue:${errorMsg}`;
+  console.warn(errorMsg);
+  layer.msg(errorMsg, { icon: 2, time: 1000 }, function (res: unknown) {});
+  emit("error",Object.assign({currentTimeStamp,msg:errorMsg}));
+};
+
+const localUpload = (option: localUploadOption,callback:Function) => {
+  let xhr: XMLHttpRequest, loadedevt, total, per: number, url, uploading;
   xhr = new XMLHttpRequest();
   url = option.url;
-  file = option.file;
-  formData.append("files", file);
-  //append 其他数据
-  if (option.otherRequestData instanceof Object) {
-    var _requestDate = option.otherRequestData;
-    for (var key in _requestDate) {
-      formData.append(key, _requestDate[key]);
-    }
-  }
+  let formData = option.formData;
+  const cb = callback;
   //事件回调
   // event callbacks
   xhr.onreadystatechange = function () {
     if (xhr.readyState === 4) {
       if ((xhr.status >= 200 && xhr.status <= 300) || xhr.status === 304) {
-        option.successF instanceof Function &&
-          option.successF(xhr.responseText);
+        let currentTimeStamp = (new Date()).valueOf();
+        let successText = xhr.responseText?xhr.responseText:uploadSuccess;
+        emit("before",Object.assign({currentTimeStamp,msg:successText,...option}));
       } else {
-        option.errorF instanceof Function && option.errorF(xhr.responseText);
+        errorF(xhr.responseText);
       }
     } else {
-      option.errorF instanceof Function && option.errorF();
+      errorF(defaultErrorMsg);
     }
   };
-  //侦查当前附件上传情况
-  /**
-   * 附件的上传进度条方法在xhr.upload.onprogeress上，
-   * 还有一个xhr.onprogress,是下载时候的进度条,***
-   * */
-  xhr.upload.onprogress = function (event) {
-    // event.total是需要传输的总字节，event.loaded是已经传输的字节。如果event.lengthComputable不为真，则event.total等于0
-    if (event.lengthComputable) {
-      loadedevt = event.loaded;
-      total = event.total;
-      per = Math.floor((100 * loadedevt) / total);
-    }
-    //执行回调
-    option.uploadProgress instanceof Function && option.uploadProgress(per);
-  };
   xhr.open("post", url, true); //不能是GET, get请求数据发送只能拼接在URL后面
-  xhr.setRequestHeader("Accept", "application/json, text/javascript");
+  // 对应Upload属性的headers字段,额外的上传参数
+  if(props.headers){
+    for(let key in props.headers){
+      xhr.setRequestHeader(key,props.headers[key]);
+    }
+  }else{
+    xhr.setRequestHeader("Accept", "application/json, text/javascript");
+  }
+  // 上传事务开启前的回调
+  let currentTimeStamp = (new Date()).valueOf();
+  emit("before",Object.assign(option,currentTimeStamp));
   xhr.send(formData);
+  if(cb&&typeof cb == "function"){
+    cb();
+  }
 };
 
 const getUploadChange = (e: any) => {
-  // console.log(e.srcElement);
-  const file = e.target.files[0];
-  console.log(file);
+  const files = e.target.files;
+  const _files = [...files];
+  // 对应Upload属性的number字段,控制单次上传个数
+  if(props.multiple&&props.number!=0&&props.number<_files.length){
+    errorF(numberErrorMsg);
+    return;
+  }
+  // 对应Upload属性的size字段,控制上传图片的大小
+  if(props.size&&props.size!=0){
+    let _cache = [];
+    for(let i =0;i<_files.length;i++){
+      let _file= _files[i];
+      let _size = _file.size;
+      if(_size>props.size*1024){
+        _cache.push(_file);
+      }
+    }
+    if(_cache&&_cache.length>0){
+      for(let i =0;i<_cache.length;i++){
+        let _sizeErrorFile = _cache[i];
+        let errorMsg = `文件 ${_sizeErrorFile.name} ${sizeErrorMsg},文件最大不可超过${props.size*1000}kb`;
+        errorF(errorMsg);
+      }
+    }
+  }
   if (props.url) {
     // 表单提交
-    localUpload({
+    localUploadTransaction({
       url: props.url,
-      file: file,
+      files: _files,
     });
   } else {
-    //
+    // 抛出上传文件信息
+    emit("done", _files);
   }
 };
-const uploadDragOver = (e: any) => {
-  //console.log("uploadDrag9ikme",e);
+const chooseFile =()=>{
+  console.log(orgFileInput.value);
+  let _target = orgFileInput.value;
+  if(_target){
+      _target.click();
+  }
+  // _target?.onclick();
 };
+const clickOrgInput = ()=>{
+  let currentTimeStamp = (new Date()).valueOf();
+  //console.log(currentTimeStamp);
+  emit("choose",currentTimeStamp);
+};
+const uploadDragOver = (e: any) => {};
 const uploadDragDrop = (e: any) => {
   isDragEnter.value = false;
+  console.log(e);
 };
 const uploadDragStop = (e: any) => {};
 const uploadDragEnter = (e: any) => {
@@ -129,46 +198,45 @@ const uploadDragEnter = (e: any) => {
 const uploadDragLeave = (e: any) => {
   isDragEnter.value = false;
 };
+//内部方法 -> end
 </script>
 <template>
-  <div class="layui-upload" v-if="!drag">
-    <div class="layui-upload-btn-box">
-      <button type="button" class="layui-btn">上传图片</button>
+  <div class="layui-upload layui-upload-wrap">
       <input
         class="layui-upload-file"
+        @click="clickOrgInput"
         :multiple="multiple"
         type="file"
-        :accept="accept"
+        :accept="acceptMime"
         :name="field"
         @change="getUploadChange"
+        :field="field"
+        ref="orgFileInput"
       />
+    <div v-if="!drag">
+      <div class="layui-upload-btn-box">
+        <lay-button type="primary" @click.stop="chooseFile">上传图片</lay-button>
+      </div>
+    </div>
+    <div
+      v-else
+      class="layui-upload-drag"
+      :class="isDragEnter ? 'layui-upload-drag-draging' : ''"
+      @dragleave.stop="uploadDragLeave"
+      @dragenter.stop="uploadDragEnter"
+      @dragover.stop="uploadDragOver"
+      @drop="uploadDragDrop"
+      @click.stop="chooseFile"
+    >
+      <i class="layui-icon"></i>
+      <p>点击上传，或将文件拖拽到此处</p>
+      <div class="layui-hide" id="uploadDemoView">
+        <hr />
+        <img src="" alt="上传成功后渲染" style="max-width: 196px" />
+      </div>
     </div>
     <div class="layui-upload-list">
-      <img class="layui-upload-img" id="demo1" />
-      <p id="demoText"></p>
+      <slot name="preview"></slot>
     </div>
   </div>
-  <div
-    v-else
-    class="layui-upload-drag"
-    :class="isDragEnter ? 'layui-upload-drag-draging' : ''"
-    @dragleave.stop="uploadDragLeave"
-    @dragenter.stop="uploadDragEnter"
-    @dragover.stop="uploadDragOver"
-    @drop="uploadDragDrop"
-  >
-    <i class="layui-icon"></i>
-    <p>点击上传，或将文件拖拽到此处</p>
-    <div class="layui-hide" id="uploadDemoView">
-      <hr />
-      <img src="" alt="上传成功后渲染" style="max-width: 196px" />
-    </div>
-    <input
-      class="layui-upload-file"
-      type="file"
-      :accept="accept"
-      :name="field"
-      @change="getUploadChange"
-    />l
-  </div>
 </template>
diff --git a/src/index.ts b/src/index.ts
index dc2c3513..355c46a3 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -81,6 +81,7 @@ import LayFullscreen from "./component/fullscreen/index";
 import LayDatePicker from "./component/datePicker/index";
 import LayNoticeBar from "./component/noticeBar/index";
 import LayTransition from "./component/transition/index";
+import LayUpload from "./component/upload/index";
 import LayConfigProvider from "./provider";
 import { InstallOptions } from "./types";
 
@@ -160,6 +161,7 @@ const components: Record<string, Component> = {
   LayDatePicker,
   LayNoticeBar,
   LayTransition,
+  LayUpload
 };
 
 const install = (app: App, options?: InstallOptions): void => {
@@ -247,6 +249,7 @@ export {
   LayDatePicker,
   LayNoticeBar,
   LayTransition,
+  LayUpload
 };
 
 export { layer };