❤
npm
Sign UpSign In

@wu-component/wu-upload
TypeScript icon, indicating that this package has built-in type declarations

2.0.3 • Public • Published

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 是否支持多选文件 Boolean true、false false
with-credentials 支持发送 cookie 凭证信息 Boolean true、false false
name 上传的文件字段名 String -- --
drag 是否启用拖拽上传 Boolean true、false false
disabled 是否禁用 Boolean true、false false
auto-upload 是否在选取文件后立即进行上传 Boolean true、false false
accept 接受上传的文件类型（thumbnail-mode 模式下此参数无效） String -- --
list-type 文件列表的类型(为空时不展示文件列表) String text/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 触发文件选择框的内容
-- 默认的内容

Readme

Keywords

none

Package Sidebar

Install

npm i @wu-component/wu-upload

Repository

github.com/wu-component/web-component-plus

Homepage

github.com/wu-component/web-component-plus#readme

Weekly Downloads

8

Version

2.0.3

License

ISC

Unpacked Size

192 kB

Total Files

17

Last publish

Collaborators

  • canyuegongzi
Try on RunKit
Report malware