fe-manage/src/components/Grateful/UploadDragger.vue

<template>
    <a-upload-dragger :data="{ ...params }" :multiple="false" :accept="accept" :action="uploadUrl" :maxCount="maxCount"
        @change="handleUploadChange" v-model:file-list="fileList" style="width:50%;">
        <p class="ant-upload-drag-icon">
            <UploadOutlined />
        </p>
        <p class="ant-upload-text">将文件拖到此处，或点击上传</p>
        <template #itemRender="{ file }">
            <div class="loadstate">
                <div class="loadborder">
                    <div class="content">
                        <div class="timebox">
                            <div class="timetop">
                                <div class="tit">{{ file.name }}</div>
                                <div class="stateloading">{{
                                    {
                                        done: "上传成功",
                                        uploading: "正在上传",
                                        error: "上传失败",
                                        removed: "正在上传",
                                    }[file.status]
                                }}
                                </div>
                            </div>
                            <a-progress :percent="file.percent" />
                        </div>
                        <!-- <div class="curloading">
                            <div class="cur">100%</div>
                            <div class="cancel" style="margin-left: 20px; cursor: pointer" @click="removeUpload">
                                删除
                            </div>
                        </div> -->
                    </div>
                </div>
            </div>
        </template>
    </a-upload-dragger>
</template>
<script setup>
import { UploadOutlined } from '@ant-design/icons-vue'
import { defineProps, ref, defineExpose } from "vue";
import { message } from "ant-design-vue";
const props = defineProps({
    uploadUrl: {
        type: String,
        default: ''
    },
    params: {
        type: Object,
        default: {}
    },
    maxCount: {
        type: Number,
        default: 1
    },
    accept: {
        type: String,
        default: ''
    }
})
const emit = defineEmits(['update:value', 'change'])
const fileList = ref([]);
const handleUploadChange = ({ file, fileList }) => {
    console.log(file, fileList, 'file');
    var FileExt = file.name.replace(/.+\./, "");
    if (props.accept && props.accept.split(',').indexOf('.' + FileExt.toLowerCase()) === -1) {
        fileList.value = [];
        return message.error("请上传正确的文件格式");
    }
    emit('update:value', fileList)
    emit('change', fileList)
}
const removeUpload = () => {
    fileList.value = [];
}

defineExpose({
    fileList,
    removeUpload
})
</script>
<style scoped lang="scss">
.loadstate {
    width: 500px;
    margin-bottom: 80px;

    .loadborder {
        width: 500px;
        height: 70px;
        border-radius: 4px;
        border: 1px dashed #eaeaea;
        margin-top: 10px;
        margin-bottom: 10px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        position: relative;

        .content {
            display: flex;
            margin-left: 20px;
            position: relative;

            .defeat {
                width: 262px;
                padding: 10px 20px;
                position: absolute;
                left: 46px;
                top: 42px;
                font-size: 14px;
                font-weight: 500;
                height: 32px;
                border-radius: 2px;
                border: 1px solid #387df7;
                display: flex;
                justify-content: center;
                align-items: center;
                cursor: pointer;

                .detext {
                    font-size: 14px;
                    font-weight: 400;
                    color: #387df7;
                }
            }

            .img {
                width: 30px;
                height: 34px;
                // background-image: url(@/assets/images/basicinfo/exl.png);
            }

            .timebox {
                margin-left: 15px;
                margin-top: -5px;

                .timetop {
                    display: flex;
                    width: 262px;
                    justify-content: space-between;

                    .tit {
                        font-size: 14px;
                        font-weight: 400;
                        color: #333333;
                        width: 200px;
                        height: 21px;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                    }

                    .stateloading {
                        font-size: 14px;
                        font-weight: 400;
                        color: #4ea6ff;
                    }

                    .statedefeat {
                        font-size: 14px;
                        font-weight: 400;
                        color: #ff7474;
                    }

                    .statesucce {
                        font-size: 14px;
                        font-weight: 400;
                        color: #35ae69;
                    }
                }

                .prog {
                    width: 262px;
                    height: 5px;
                    background: #eaf1fe;
                    border-radius: 4px;

                    .inprogloading {
                        width: 55%;
                        height: 5px;
                        border-radius: 4px;

                        background: #4ea6ff;
                    }

                    //下载失败条
                    .inprogdefeat {
                        width: 55%;
                        height: 5px;
                        border-radius: 4px;

                        background: #ff7474;
                    }

                    //下载成功条
                    .inprogsucce {
                        width: 100%;
                        height: 5px;
                        border-radius: 4px;

                        background: #57c887;
                    }
                }
            }

            .curloading {
                margin-left: 15px;
                margin-top: 15px;
                display: flex;

                .cur {
                    font-size: 14px;
                    font-weight: 400;
                    color: #333333;
                }

                .cancel {
                    font-size: 14px;
                    font-weight: 400;
                    color: #387df7;
                }
            }
        }
    }

}
</style>