refactor: 重构upload组件
This commit is contained in:
lockingreal
parent
0495d20af0
commit
7d2fc5f1ce
@ -13,7 +13,7 @@
|
|||||||
::: demo 使用 `lay-upload` 标签, 创建一个按钮上传单文件
|
::: demo 使用 `lay-upload` 标签, 创建一个按钮上传单文件
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<lay-upload></lay-upload>
|
<lay-upload @done="getUploadFile"/>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
@ -21,7 +21,32 @@ import { ref } from 'vue'
|
|||||||
|
|
||||||
export default {
|
export default {
|
||||||
setup() {
|
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 {
|
return {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -30,7 +55,7 @@ export default {
|
|||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
::: title 简约按钮
|
::: title 拖拽上传
|
||||||
:::
|
:::
|
||||||
|
|
||||||
::: demo 使用 `lay-upload` 标签, 使用 `drag属性` 创建一个可拖拽的上传文件域
|
::: demo 使用 `lay-upload` 标签, 使用 `drag属性` 创建一个可拖拽的上传文件域
|
||||||
@ -53,292 +78,87 @@ export default {
|
|||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
<!-- ::: title 按钮尺寸
|
::: title 自定义预览
|
||||||
:::
|
:::
|
||||||
|
|
||||||
::: demo 使用 `size` 属性, 创建指定尺寸的按钮, 可选值 `lg` `sm` `xs`
|
::: demo 使用 `lay-upload` 标签, 使用 `#preview` 自定义预览的UI交互
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<lay-button type="primary" size="lg">原始按钮</lay-button>
|
<lay-upload @done="getUploadFile">
|
||||||
<lay-button type="default" size="lg">默认按钮</lay-button>
|
<template #preview>
|
||||||
<lay-button type="normal" size="lg">百搭按钮</lay-button>
|
<div class="easy-wrap">
|
||||||
<lay-button type="warm" size="lg">暖色按钮</lay-button>
|
<img src="https://chixian.oss-cn-hangzhou.aliyuncs.com/20211023003617_0706a.jpg" style="width:62.9px;height:63.2px"/>
|
||||||
<lay-button type="danger" size="lg">警告按钮</lay-button>
|
<img src="https://chixian.oss-cn-hangzhou.aliyuncs.com/20211023003617_0706a.jpg" style="width:62.9px;height:63.2px"/>
|
||||||
<lay-button type="disabled" size="lg">禁用按钮</lay-button>
|
<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>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { ref } from 'vue'
|
import { ref } from 'vue'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
setup() {
|
setup() {
|
||||||
|
const getUploadFile = (file)=>{
|
||||||
return {
|
console.log(file);
|
||||||
}
|
};
|
||||||
}
|
return {
|
||||||
|
getUploadFile
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
::: title 流式按钮
|
::: title Upload 属性
|
||||||
:::
|
|
||||||
|
|
||||||
::: 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 属性
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
::: table
|
::: table
|
||||||
|
|
||||||
| 属性 | 描述 | 类型 | 默认值 | 可选值 |
|
| 属性 | 描述 | 类型 | 默认值 | 可选值 |
|
||||||
| ----------- | -------- | ------- | --------- | ---------------------------------- |
|
| ----------- | -------- | ------- | --------- | ---------------------------------- |
|
||||||
| type | 主题 | string | `primary` | `primary` `normal` `warm` `danger` |
|
| url | 服务端上传接口，返回的数据规范请详见下文 | string | -- | -- |
|
||||||
| size | 尺寸 | string | -- | `lg` `sm` `xs` |
|
| data | 请求上传接口的额外参数 | object | -- | -- |
|
||||||
| fluid | 最大化 | boolean | `false` | `true` `false` |
|
| headers | 接口的请求头 | object | -- | -- |
|
||||||
| radius | 圆角 | boolean | `false` | `true` `false` |
|
| acceptMime | 文件选择框时的可选文件类型 | string | `images` | `images` |
|
||||||
| border | 边框 | string | `green` | `green` `blue` `orange` `red` |
|
| field | 设定文件域的字段名 | string | `file` | -- |
|
||||||
| disabled | 禁用 | boolean | `false` | `true` `false` |
|
| size | 设置文件最大可允许上传的大小，单位 KB。不支持ie8/9 | number | `0(不限制)` | -- |
|
||||||
| loading | 加载 | boolean | `false` | `true` `false` |
|
| multiple | 是否允许多文件上传。设置 true即可开启。不支持ie8/9 | boolean | false | -- |
|
||||||
| native-type | 原生类型 | string | `button` | `button` `submit` `reset` |
|
| number | 设置同时可上传的文件数量，一般配合 multiple 参数出现。 | number | `0(不限制)` | -- |
|
||||||
|
| drag | 是否接受拖拽的文件上传，设置 false 可禁用。不支持ie8/9 | boolean | true | -- |
|
||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
::: title Button 插槽
|
::: title Upload 插槽
|
||||||
:::
|
:::
|
||||||
|
|
||||||
::: table
|
::: table
|
||||||
|
|
||||||
| 名称 | 描述 | 参数 |
|
| 名称 | 描述 | 参数 |
|
||||||
| ------- | -------- | ---- |
|
| ------- | -------- | ---- |
|
||||||
| default | 默认内容 | -- |
|
| preview | 自定义预览效果 | -- |
|
||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
::: title Button Group 属性
|
::: title Upload 事件
|
||||||
:::
|
:::
|
||||||
|
|
||||||
::: table
|
::: table
|
||||||
|
|
||||||
| 属性 | 描述 | 类型 | 默认值 | 可选值 |
|
| 名称 | 描述 | 参数 |
|
||||||
| ---- | ---- | ---- | ------ | ------ |
|
|
||||||
| - | - | - | - |
|
|
||||||
|
|
||||||
:::
|
|
||||||
|
|
||||||
::: title Button Group 插槽
|
|
||||||
:::
|
|
||||||
|
|
||||||
::: table
|
|
||||||
|
|
||||||
| 事件 | 描述 | 参数 |
|
|
||||||
| ------- | -------- | ---- |
|
| ------- | -------- | ---- |
|
||||||
| default | 默认内容 | -- |
|
| choose | 打开系统选择文件窗体的回调 | -- |
|
||||||
|
| before | 上传事务开启前的回调 | -- |
|
||||||
|
| done | 上传事务结束的回调 | -- |
|
||||||
|
| error | 上传事务中出现错误的回调 | -- |
|
||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
|
||||||
::: comment
|
::: comment
|
||||||
:::
|
:::
|
||||||
|
|
||||||
::: previousNext button
|
::: previousNext button
|
||||||
::: -->
|
|
||||||
|
|||||||
@ -297,6 +297,12 @@ const zhCN = [
|
|||||||
import("../../docs/zh-CN/components/datePicker.md"),
|
import("../../docs/zh-CN/components/datePicker.md"),
|
||||||
meta: { title: "日期选择器" },
|
meta: { title: "日期选择器" },
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: "/zh-CN/components/upload",
|
||||||
|
component: () =>
|
||||||
|
import("../../docs/zh-CN/components/upload.md"),
|
||||||
|
meta: { title: "文件上传" },
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: "/zh-CN/components/layer",
|
path: "/zh-CN/components/layer",
|
||||||
component: () => import("../../docs/zh-CN/components/layer.md"),
|
component: () => import("../../docs/zh-CN/components/layer.md"),
|
||||||
|
|||||||
@ -176,6 +176,12 @@ const menus = [
|
|||||||
subTitle: "datePicker",
|
subTitle: "datePicker",
|
||||||
path: "/zh-CN/components/datePicker",
|
path: "/zh-CN/components/datePicker",
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
id: 40,
|
||||||
|
title: "文件上传",
|
||||||
|
subTitle: "upload",
|
||||||
|
path: "/zh-CN/components/upload",
|
||||||
|
},
|
||||||
{
|
{
|
||||||
id: 29,
|
id: 29,
|
||||||
title: "图标选择器",
|
title: "图标选择器",
|
||||||
|
|||||||
@ -1,11 +1,17 @@
|
|||||||
@import "../../theme/variable.less";
|
@import "../../theme/variable.less";
|
||||||
|
|
||||||
.layui-upload-file {
|
.layui-upload-file {
|
||||||
display: none !important;
|
// display: none !important;
|
||||||
opacity: 0.01;
|
opacity: 0.01;
|
||||||
|
position: relative;
|
||||||
filter: Alpha(opacity=1);
|
filter: Alpha(opacity=1);
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
}
|
||||||
|
.layui-upload-btn-box{
|
||||||
|
position:relative;
|
||||||
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.layui-upload-drag,
|
.layui-upload-drag,
|
||||||
.layui-upload-form,
|
.layui-upload-form,
|
||||||
.layui-upload-wrap {
|
.layui-upload-wrap {
|
||||||
@ -44,6 +50,9 @@
|
|||||||
.layui-upload-drag[lay-over] {
|
.layui-upload-drag[lay-over] {
|
||||||
border-color: @global-primary-color;
|
border-color: @global-primary-color;
|
||||||
}
|
}
|
||||||
|
.layui-upload-drag-draging{
|
||||||
|
border-color: @global-primary-color;
|
||||||
|
}
|
||||||
|
|
||||||
.layui-upload-iframe {
|
.layui-upload-iframe {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@ -56,6 +65,7 @@
|
|||||||
.layui-upload-wrap {
|
.layui-upload-wrap {
|
||||||
position: relative;
|
position: relative;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.layui-upload-wrap .layui-upload-file {
|
.layui-upload-wrap .layui-upload-file {
|
||||||
@ -65,8 +75,8 @@
|
|||||||
top: 0;
|
top: 0;
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
font-size: 100px;
|
font-size: 100px;
|
||||||
width: 100%;
|
width: 1px;
|
||||||
height: 100%;
|
height: 1px;
|
||||||
opacity: 0.01;
|
opacity: 0.01;
|
||||||
filter: Alpha(opacity=1);
|
filter: Alpha(opacity=1);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|||||||
@ -6,121 +6,190 @@ export default {
|
|||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import "./index.less";
|
import "./index.less";
|
||||||
import { Recordable } from "../../types";
|
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
|
//https://www.layuiweb.com/doc/modules/upload.html#options
|
||||||
export interface LayUploadProps {
|
export interface LayUploadProps {
|
||||||
elem?: string | HTMLElement;
|
|
||||||
url?: string;
|
url?: string;
|
||||||
data?: Recordable;
|
data?: any;
|
||||||
headers?: Recordable;
|
headers?: Recordable;
|
||||||
accept?: "images" | "file" | "video" | "audio";
|
|
||||||
acceptMime?: "images" | "file" | "video" | "audio";
|
acceptMime?: "images" | "file" | "video" | "audio";
|
||||||
exts?: "jpg" | "png" | "gif" | "bmp" | "jpeg";
|
|
||||||
auto?: boolean;
|
|
||||||
bindAction?: string | HTMLElement;
|
|
||||||
field?: string;
|
field?: string;
|
||||||
size?: number;
|
size?: number;
|
||||||
multiple?: boolean;
|
multiple?: boolean;
|
||||||
number: number;
|
number: number;
|
||||||
drag?: boolean;
|
drag?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
const props = withDefaults(defineProps<LayUploadProps>(), {
|
const props = withDefaults(defineProps<LayUploadProps>(), {
|
||||||
accept: "images",
|
|
||||||
acceptMime: "images",
|
acceptMime: "images",
|
||||||
auto: true,
|
|
||||||
field: "file",
|
field: "file",
|
||||||
size: 0,
|
size: 0,
|
||||||
multiple: false,
|
multiple: false,
|
||||||
number: 0,
|
number: 0,
|
||||||
drag: false,
|
drag: false,
|
||||||
});
|
});
|
||||||
|
|
||||||
const emit = defineEmits(["choose", "before", "done", "error"]);
|
|
||||||
|
|
||||||
const slot = useSlots();
|
const slot = useSlots();
|
||||||
const slots = slot.default && slot.default();
|
const slots = slot.default && slot.default();
|
||||||
|
const emit = defineEmits(["choose", "before", "done", "error"]);
|
||||||
|
|
||||||
|
// 内部变量
|
||||||
const isDragEnter = ref(false);
|
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 {
|
interface localUploadOption {
|
||||||
url: string;
|
url: string;
|
||||||
file?: unknown;
|
[propMame: string]: any;
|
||||||
otherRequestData?: any;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const localUpload = (option: any) => {
|
const errorF = (errorText: string) => {
|
||||||
let file,
|
let currentTimeStamp = (new Date()).valueOf();
|
||||||
formData,
|
let errorMsg = errorText ? errorText : defaultErrorMsg;
|
||||||
xhr: XMLHttpRequest,
|
errorMsg = `layui-vue:${errorMsg}`;
|
||||||
loadedevt,
|
console.warn(errorMsg);
|
||||||
total,
|
layer.msg(errorMsg, { icon: 2, time: 1000 }, function (res: unknown) {});
|
||||||
per: number,
|
emit("error",Object.assign({currentTimeStamp,msg:errorMsg}));
|
||||||
url,
|
};
|
||||||
uploading;
|
|
||||||
formData = new FormData();
|
const localUpload = (option: localUploadOption,callback:Function) => {
|
||||||
|
let xhr: XMLHttpRequest, loadedevt, total, per: number, url, uploading;
|
||||||
xhr = new XMLHttpRequest();
|
xhr = new XMLHttpRequest();
|
||||||
url = option.url;
|
url = option.url;
|
||||||
file = option.file;
|
let formData = option.formData;
|
||||||
formData.append("files", file);
|
const cb = callback;
|
||||||
//append 其他数据
|
|
||||||
if (option.otherRequestData instanceof Object) {
|
|
||||||
var _requestDate = option.otherRequestData;
|
|
||||||
for (var key in _requestDate) {
|
|
||||||
formData.append(key, _requestDate[key]);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
//事件回调
|
//事件回调
|
||||||
// event callbacks
|
// event callbacks
|
||||||
xhr.onreadystatechange = function () {
|
xhr.onreadystatechange = function () {
|
||||||
if (xhr.readyState === 4) {
|
if (xhr.readyState === 4) {
|
||||||
if ((xhr.status >= 200 && xhr.status <= 300) || xhr.status === 304) {
|
if ((xhr.status >= 200 && xhr.status <= 300) || xhr.status === 304) {
|
||||||
option.successF instanceof Function &&
|
let currentTimeStamp = (new Date()).valueOf();
|
||||||
option.successF(xhr.responseText);
|
let successText = xhr.responseText?xhr.responseText:uploadSuccess;
|
||||||
|
emit("before",Object.assign({currentTimeStamp,msg:successText,...option}));
|
||||||
} else {
|
} else {
|
||||||
option.errorF instanceof Function && option.errorF(xhr.responseText);
|
errorF(xhr.responseText);
|
||||||
}
|
}
|
||||||
} else {
|
} 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.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);
|
xhr.send(formData);
|
||||||
|
if(cb&&typeof cb == "function"){
|
||||||
|
cb();
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const getUploadChange = (e: any) => {
|
const getUploadChange = (e: any) => {
|
||||||
// console.log(e.srcElement);
|
const files = e.target.files;
|
||||||
const file = e.target.files[0];
|
const _files = [...files];
|
||||||
console.log(file);
|
// 对应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) {
|
if (props.url) {
|
||||||
// 表单提交
|
// 表单提交
|
||||||
localUpload({
|
localUploadTransaction({
|
||||||
url: props.url,
|
url: props.url,
|
||||||
file: file,
|
files: _files,
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
//
|
// 抛出上传文件信息
|
||||||
|
emit("done", _files);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
const uploadDragOver = (e: any) => {
|
const chooseFile =()=>{
|
||||||
//console.log("uploadDrag9ikme",e);
|
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) => {
|
const uploadDragDrop = (e: any) => {
|
||||||
isDragEnter.value = false;
|
isDragEnter.value = false;
|
||||||
|
console.log(e);
|
||||||
};
|
};
|
||||||
const uploadDragStop = (e: any) => {};
|
const uploadDragStop = (e: any) => {};
|
||||||
const uploadDragEnter = (e: any) => {
|
const uploadDragEnter = (e: any) => {
|
||||||
@ -129,46 +198,45 @@ const uploadDragEnter = (e: any) => {
|
|||||||
const uploadDragLeave = (e: any) => {
|
const uploadDragLeave = (e: any) => {
|
||||||
isDragEnter.value = false;
|
isDragEnter.value = false;
|
||||||
};
|
};
|
||||||
|
//内部方法 -> end
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<div class="layui-upload" v-if="!drag">
|
<div class="layui-upload layui-upload-wrap">
|
||||||
<div class="layui-upload-btn-box">
|
|
||||||
<button type="button" class="layui-btn">上传图片</button>
|
|
||||||
<input
|
<input
|
||||||
class="layui-upload-file"
|
class="layui-upload-file"
|
||||||
|
@click="clickOrgInput"
|
||||||
:multiple="multiple"
|
:multiple="multiple"
|
||||||
type="file"
|
type="file"
|
||||||
:accept="accept"
|
:accept="acceptMime"
|
||||||
:name="field"
|
:name="field"
|
||||||
@change="getUploadChange"
|
@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>
|
||||||
<div class="layui-upload-list">
|
<div class="layui-upload-list">
|
||||||
<img class="layui-upload-img" id="demo1" />
|
<slot name="preview"></slot>
|
||||||
<p id="demoText"></p>
|
|
||||||
</div>
|
</div>
|
||||||
</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>
|
</template>
|
||||||
|
|||||||
@ -81,6 +81,7 @@ import LayFullscreen from "./component/fullscreen/index";
|
|||||||
import LayDatePicker from "./component/datePicker/index";
|
import LayDatePicker from "./component/datePicker/index";
|
||||||
import LayNoticeBar from "./component/noticeBar/index";
|
import LayNoticeBar from "./component/noticeBar/index";
|
||||||
import LayTransition from "./component/transition/index";
|
import LayTransition from "./component/transition/index";
|
||||||
|
import LayUpload from "./component/upload/index";
|
||||||
import LayConfigProvider from "./provider";
|
import LayConfigProvider from "./provider";
|
||||||
import { InstallOptions } from "./types";
|
import { InstallOptions } from "./types";
|
||||||
|
|
||||||
@ -160,6 +161,7 @@ const components: Record<string, Component> = {
|
|||||||
LayDatePicker,
|
LayDatePicker,
|
||||||
LayNoticeBar,
|
LayNoticeBar,
|
||||||
LayTransition,
|
LayTransition,
|
||||||
|
LayUpload
|
||||||
};
|
};
|
||||||
|
|
||||||
const install = (app: App, options?: InstallOptions): void => {
|
const install = (app: App, options?: InstallOptions): void => {
|
||||||
@ -247,6 +249,7 @@ export {
|
|||||||
LayDatePicker,
|
LayDatePicker,
|
||||||
LayNoticeBar,
|
LayNoticeBar,
|
||||||
LayTransition,
|
LayTransition,
|
||||||
|
LayUpload
|
||||||
};
|
};
|
||||||
|
|
||||||
export { layer };
|
export { layer };
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user