2.0.3 • Published 5 months ago

@wu-component/wu-upload v2.0.3

Weekly downloads
-
License
ISC
Repository
github
Last release
5 months ago

Upload 文件上传

通过点击或者拖拽上传文件

点击上传

::: demo

<template>
    <div style="display: flex; width: 30% align-items: center;justify-content: space-around;padding: 16px">
        <wu-plus-upload
                show-file-list="false"
                id="upload2"
                auto-upload="true"
                list-type="text"
                file-list='[{"name":"food.jpeg","url":"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"},{"name":"food2.jpeg","url":"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"}]'
                headers='{"token":"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJuYW1lIjoicm9vdCIsImlhdCI6MTY2MjkxMDM5MiwiZXhwIjoxNjYyOTEzOTkyfQ.65rWS2yBQHI1cP_PBqmk8jr2_h5_ENIRckZarmvffzU"}'
                action=""
                data='{"category":4,"userName":"root","token":"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJuYW1lIjoicm9vdCIsImlhdCI6MTY2MjkxMDM5MiwiZXhwIjoxNjYyOTEzOTkyfQ.65rWS2yBQHI1cP_PBqmk8jr2_h5_ENIRckZarmvffzU"}'
        >
            <wu-plus-button>选取文件</wu-plus-button>
            <div slot="tip" class="wu-upload_tip" style="font-size: 12px;color: #606266;">只能上传jpg/png文件，且不超过500kb</div>
        </wu-plus-upload>
    </div>
</template>
<script>
</script>

:::

用户头像上传

多选框不可用状态。

::: demo

<template>
    <div style="display: flex; width: 30% align-items: center;justify-content: space-around;padding: 16px">
        <wu-plus-upload
                show-file-list="false"
                id="uploadAvatar"
                auto-upload="true"
                list-type=""
                file-list='[{"name":"food.jpeg","url":"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"}]'
                headers='{"token":"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJuYW1lIjoicm9vdCIsImlhdCI6MTY2MjkxMDM5MiwiZXhwIjoxNjYyOTEzOTkyfQ.65rWS2yBQHI1cP_PBqmk8jr2_h5_ENIRckZarmvffzU"}'
                action=""
                data='{"category":4,"userName":"root","token":"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJuYW1lIjoicm9vdCIsImlhdCI6MTY2MjkxMDM5MiwiZXhwIjoxNjYyOTEzOTkyfQ.65rWS2yBQHI1cP_PBqmk8jr2_h5_ENIRckZarmvffzU"}'
        >
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <div v-else class="el-icon-plus avatar-uploader-icon">+</div>
        </wu-plus-upload>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                imageUrl: ""
            }
        },
        mounted() {
            const dom = document.querySelector("#uploadAvatar");
            dom.addEventListener("change", (e) => {
                if (e.detail.file?.response?.data?.[0]?.url) {
                    this.imageUrl = e.detail.file.response.data[0].url
                }
            })
            
        }
    }
</script>
<style>
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>

:::

照片墙

::: demo

<template>
    <div style="display: flex; width: 30% align-items: center;justify-content: space-around;padding: 16px">
        <wu-plus-upload
                show-file-list="false"
                id="upload055"
                auto-upload="true"
                list-type="picture-card"
                file-list='[{"name":"food.jpeg","url":"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"},{"name":"food2.jpeg","url":"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"}]'
                headers='{"token":"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJuYW1lIjoicm9vdCIsImlhdCI6MTY2MjkxMDM5MiwiZXhwIjoxNjYyOTEzOTkyfQ.65rWS2yBQHI1cP_PBqmk8jr2_h5_ENIRckZarmvffzU"}'
                action=""
                data='{"category":4,"userName":"root","token":"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJuYW1lIjoicm9vdCIsImlhdCI6MTY2MjkxMDM5MiwiZXhwIjoxNjYyOTEzOTkyfQ.65rWS2yBQHI1cP_PBqmk8jr2_h5_ENIRckZarmvffzU"}'
        >
            <wu-plus-button>选取文件</wu-plus-button>
            <div slot="tip" class="wu-upload_tip" style="font-size: 12px;color: #606266;">只能上传jpg/png文件，且不超过500kb</div>
        </wu-plus-upload>
    </div>
</template>
<script>
</script>

:::

图片列表缩略图

::: demo

<template>
    <div style="display: flex; width: 30% align-items: center;justify-content: space-around;padding: 16px">
        <wu-plus-upload
                show-file-list="false"
                id="upload055"
                auto-upload="true"
                list-type="picture"
                file-list='[{"name":"food.jpeg","url":"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"},{"name":"food2.jpeg","url":"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"}]'
                headers='{"token":"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJuYW1lIjoicm9vdCIsImlhdCI6MTY2MjkxMDM5MiwiZXhwIjoxNjYyOTEzOTkyfQ.65rWS2yBQHI1cP_PBqmk8jr2_h5_ENIRckZarmvffzU"}'
                action=""
                data='{"category":4,"userName":"root","token":"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJuYW1lIjoicm9vdCIsImlhdCI6MTY2MjkxMDM5MiwiZXhwIjoxNjYyOTEzOTkyfQ.65rWS2yBQHI1cP_PBqmk8jr2_h5_ENIRckZarmvffzU"}'
        >
            <wu-plus-button>选取文件</wu-plus-button>
            <div slot="tip" class="wu-upload_tip" style="font-size: 12px;color: #606266;">只能上传jpg/png文件，且不超过500kb</div>
        </wu-plus-upload>
    </div>
</template>
<script>
</script>

:::

拖拽上传

::: demo

<template>
    <div style="display: flex; width: 30% align-items: center;justify-content: space-around;padding: 16px">
        <wu-plus-upload
                show-file-list="false"
                id="upload2"
                auto-upload="true"
                list-type="text"
                drag="true"
                file-list='[]'
                headers='{"token":"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJuYW1lIjoicm9vdCIsImlhdCI6MTY2MjkxMDM5MiwiZXhwIjoxNjYyOTEzOTkyfQ.65rWS2yBQHI1cP_PBqmk8jr2_h5_ENIRckZarmvffzU"}'
                action=""
                data='{"category":4,"userName":"root","token":"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJuYW1lIjoicm9vdCIsImlhdCI6MTY2MjkxMDM5MiwiZXhwIjoxNjYyOTEzOTkyfQ.65rWS2yBQHI1cP_PBqmk8jr2_h5_ENIRckZarmvffzU"}'
        >
            <div slot="tip" class="wu-upload_tip" style="font-size: 12px;color: #606266;">只能上传jpg/png文件，且不超过500kb</div>
        </wu-plus-upload>
    </div>
</template>
<script>
</script>

:::

手动上传

::: demo

<template>
    <div style="display: flex; width: 30% align-items: center;justify-content: space-around;padding: 16px">
        <wu-plus-upload
                show-file-list="false"
                id="upload223"
                auto-upload="false"
                list-type="text"
                multiple="true"
                file-list='[]'
                headers='{"token":"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJuYW1lIjoicm9vdCIsImlhdCI6MTY2MjkxMDM5MiwiZXhwIjoxNjYyOTEzOTkyfQ.65rWS2yBQHI1cP_PBqmk8jr2_h5_ENIRckZarmvffzU"}'
                action="https://canyuegongzi.xyz/simple-file-center/v1.0/qiniu/multipleQiniu"
                data='{"category":4,"userName":"root","token":"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJuYW1lIjoicm9vdCIsImlhdCI6MTY2MjkxMDM5MiwiZXhwIjoxNjYyOTEzOTkyfQ.65rWS2yBQHI1cP_PBqmk8jr2_h5_ENIRckZarmvffzU"}'
        >
            <button>选取文件</button>
            <div slot="tip" class="wu-upload_tip" style="font-size: 12px;color: #606266;">只能上传jpg/png文件，且不超过500kb</div>
        </wu-plus-upload>

        <wu-plus-button id="okUploadFile">确认上传文件</wu-plus-button>
    </div>
</template>
<script>
    export default {
        mounted() {
            const okUploadFile = document.querySelector("#okUploadFile");
            okUploadFile.addEventListener("click", () => {
                const upload223 = document.querySelector("#upload223");
                console.log(upload223);
                upload223.submit();
            })
        }
    }
</script>

:::

checkbox Attributes

参数说明类型可选值默认值
action必选参数，上传的地址String----
headers设置上传的请求头部Object--{}
data上传时附带的额外参数Object--{}
multiple是否支持多选文件Booleantrue、falsefalse
with-credentials支持发送 cookie 凭证信息Booleantrue、falsefalse
name上传的文件字段名String----
drag是否启用拖拽上传Booleantrue、falsefalse
disabled是否禁用Booleantrue、falsefalse
auto-upload是否在选取文件后立即进行上传Booleantrue、falsefalse
accept接受上传的文件类型（thumbnail-mode 模式下此参数无效）String----
list-type文件列表的类型(为空时不展示文件列表)Stringtext/picture/picture-card''
file-list上传的文件列表, 例如: {name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}Array--[]
limit最大允许上传个数Number--5

checkbox Event

事件名说明参数
file文件选择(event: CustomEvent) => void
change文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用(event: CustomEvent) => void
success文件上传成功时的钩子(event: CustomEvent) => void
error文件上传失败时时的钩子(event: CustomEvent) => void
remove文件列表移除文件时的钩子(event: CustomEvent) => void
preview点击文件列表中已上传的文件时的钩子(event: CustomEvent) => void

Slot

参数说明
trigger触发文件选择框的内容
--默认的内容
@wu-component/common@wu-component/web-core-plus@wu-component/wu-progress
@infinitebrahmanuniverse/nolb-_wu@everything-registry/sub-chunk-1024@wu-component/ui-plus
2.0.3

5 months ago

2.0.1

1 year ago

2.0.0

1 year ago

1.11.8

1 year ago

1.11.6

1 year ago

1.11.4

1 year ago

1.9.24

2 years ago

1.9.21

2 years ago

1.9.20

2 years ago

1.9.17

2 years ago

1.9.1

2 years ago

1.8.0

2 years ago

1.7.0

2 years ago

1.6.1

2 years ago

1.6.0

2 years ago

1.5.0

2 years ago

1.4.3

2 years ago

1.4.2

2 years ago

1.4.1

2 years ago

1.0.1

2 years ago

0.0.9

2 years ago

0.0.8

2 years ago