<template>
    <div class="ht-base-upload-demo">
        <h4>文本上传-默认</h4>
        <span style="display: block;margin:10px 0;">支持word、excel、pdf文件格式，大小不超过20MB</span>
        <ht-base-upload
                name="file"
                :multiple="true"
                action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                :headers="headers"
                :accept="acceptType"
                :max-size="20480"
                :on-exceeded-size="handleMaxSize">
            <ht-base-button type="dashed" icon="LiRa_upload">上传文件</ht-base-button>
        </ht-base-upload>

        <h4 style="margin-top: 50px;">文本上传-已上传文件列表</h4>
        <span style="display: block;margin:10px 0; ">支持word、excel、pdf文件格式，大小不超过20MB</span>
        <ht-base-upload name="file"
                        :multiple="true"
                        action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                        :headers="headers"
                        :accept="acceptType"
                        :max-size="20480"
                        :on-exceeded-size="handleMaxSize"
                        :default-file-list="defaultFileList">
            <ht-base-button type="dashed" icon="LiRa_upload">上传文件</ht-base-button>
        </ht-base-upload>
    </div>
</template>

<script>
    export default {
        name: 'HtBaseUploadDemo',
        data() {
            return {
                acceptType: '.doc,.docx,.xlxs,.pdf',
                headers: {
                    authorization: 'authorization-text',
                },
                defaultFileList: [{
                    name: 'xxx.docx',
                    url: 'http://www.baidu.com/xxx.png',
                }, {
                    name: 'yyy.docx',
                    url: 'http://www.baidu.com/yyy.png',
                }, {
                    name: 'zzz.docx',
                    url: 'http://www.baidu.com/zzz.png',
                }],
            }
        },
        methods: {
            handleMaxSize() {
                this.$HtBaseMessage.error('文件大小不超过20MB！')
            }
        }
    }
</script>
<style>
    .ht-base-upload-demo {

    }
</style>

