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

<template>
    <a-upload :file-list="files" :action="url" :show-upload-list="showUploadList" :multiple="multiple"
        :before-upload="beforeUpload" :headers="headers" @change="handleChange" ref="imageRef" :data="{ ...params }">
        <template v-for="(_, key, index) in $slots" :key="index" v-slot:[key]>
            <slot :name="key"></slot>
        </template>
    </a-upload>
</template>
<script setup>
import { defineProps, defineEmits, defineExpose, ref, watch } from "vue";
import { message } from "ant-design-vue";
import { getCookieForName } from "@/api/method";
const props = defineProps({
    value: {
        type: Array,
        default: () => []
    },
    multiple: {
        type: Boolean,
        default: false
    },
    showUploadList: {
        type: Boolean,
        default: false
    },
    fileType: {
        type: Array,
        default: () => []
    },
    url: {
        type: String,
        default: '/systemapi/api/m/xfile/base/file/upload'
    },
    params: {
        type: Object,
        default: {
            folderId: process.env.VUE_APP_TOOL_FOLDERID
        }
    }
})

const emit = defineEmits({})

const files = ref([])
const imageRef = ref()
const headers = { token: getCookieForName("token") };
watch(props, () => {
    props.value.length !== files.value.length && (files.value = props.value)
})

function handleChange({ file, fileList }) {
    file.response && file.response.code === 200 && (file.url = file.response.data)
    files.value = fileList
    emit('update:value', fileList)
}

function beforeUpload(file) {
    if (!props.fileType.includes(file.name.split(".").slice(-1).join(''))) {
        message.error("目前只支持zip格式");
        return false;
    }
    const fileSizeLimitinMB = 500 * 1024 * 1024
    if(file.size > fileSizeLimitinMB){
        message.error("文件大小不能超过500M");
        return false;
    }
}

function remove(i) {
    files.value.splice(i, 1)
    emit('update:value', files.value)
}

function reUpload(i) {
    if (files.value[i].status === 'ready' || files.value[i].status === 'uploading') {
        imageRef.value.abort(files.value[i].raw)
        files.value[i].status = 'abort';
    } else if (files.value[i].status === 'fail' || files.value[i].status === 'abort') {
        imageRef.value.handleStart(files.value[i].raw)
        imageRef.value.submit()
    }
}

function abort(i) {
    imageRef.value.abort(files.value[i].raw)
}


defineExpose({ reUpload, remove, abort })

</script>