vue3+elementPlus通过el-upload实现文件只能上传一份

<template>

    <div class="td-upload">

        <span v-if="disignFile?.showTarget?.url">

            <!-- 文件跳转新窗口预览 -->

            <a :href="disignFile?.showTarget?.url" target="_blank">{{disignFile?.showTarget?.name}}</a>

            <!-- 删除文件按钮 -->

            <span class="remove-file" @click="delDesignFile" v-if="!readOnly">

                <el-icon><CloseBold /></el-icon>

            </span>

        </span>

        <span v-else>

            <el-upload

                action=''

                accept="*.*"

                :limit="1"

                :auto-upload="false"

                :show-file-list="false"

                :file-list="fileList"

                :on-change="getDesignFile">

                <el-icon><Plus class="task-icon"/></el-icon>

            </el-upload>

        </span>

        </div>

</template>



<script setup lang="ts">

    import { ref } from "vue"

    import {uploadFile, deleteFile} from "@/api/project";

    import { ElMessage } from "element-plus";

    const props = withDefaults(

        defineProps<{

            disignFile: any;//{showTarget:{resourceName:'',name:'',url:''},savedTarget:{resourceName:'',name:'',url:''}}

            type?: string; //产品 prod, 部件comp， 零件part, 其他other

            readOnly?: boolean; //只读模式

        }>(), {

            disignFile: {},

            type: 'other',

            readOnly: false,

        }

    )

    const emit = defineEmits(['changeDesign']);



    const fileList = ref<any>([]);



    async function getDesignFile(_:any, fileLists:any){

        let fileList:any;

        if (fileLists.length > 1) {

            fileList = [fileLists[fileLists.length - 1]]

        } else{

            fileList = fileLists

        }

        if(fileList.length === 0) return;

        const data = {...props.disignFile}

        data.showTarget = await upfile(props.type, fileList[0].raw)

        emit('changeDesign', data)

    }

    async function upfile(type:any, content:any){

        var form_data = new FormData()

        form_data.append("type", type)

        form_data.append("file", content)

        const res = await uploadFile(form_data);

        fileList.value = [];//limit设置为1，只上传一份文件的情况下，此代码为必须，否则会出现上传文件失败之后，不能再次上传的情况

        if(res?.code === 200 ){

            return {

                url:res.url,

                name:res.originalFilename,

                resourceName:res.resourceName,

            }

        }

        else{

            ElMessage({

                message: res?.msg || "上传文件失败",

                type: 'error',

            })

        }

        return {}

    }

    async function delDesignFile(){

        var delResult = await deleteFile(props.disignFile.showTarget)

        if (delResult?.code === 200){

            const data = {...props.disignFile}

            data.showTarget = {}

            emit('changeDesign', data)

        }

    }




</script>



<style lang="less" scoped>

    .td-upload{

        width: 100%;

        height: 100%;

        text-align: left;

        .remove-file{

            cursor: pointer;

        }

    }

</style>