element-plus Upload组件加了v-model属性导致本地图片能回显，在服务器上图片不能回显问题

场景：使用upload组件，调用后端上传图片接口，将接口返回的图片路径放到 el-image 中实现回显

问题：在开发环境调试过程中，图片可正常回显。代码部署到线上环境服务器后，上传成功，返回的图片路径在浏览器可正常打开，但就是无法回显图片

代码：

父组件代码

<imgUpload :size="1024*5" :fileList="TData.fileList" />

<script setup lang="ts">
import imgUpload from '../components/imgUpload/index.vue'

const TData=reactive({
    fileList:[] as any[],
})

async function httpRequest(v:any){
    const newForm = new FormData()
    newForm.append('file',v.file)
    const {data,code} = await oosImgUpload(newForm)
    if(code==200){
        ElMessage({
            type:"success",
            message:'上传成功'
        })
        const {ossId,fileName,url,prefixPath} = data
        cooperateFormData.feiles.push({
            "photoFile":url+"\\"+fileName,
            "ossId":ossId,
            "showPhoto":"N"
        })
        let baseUrl = window.location.protocol+'//'+window.location.host
        imgObjFun({
            ossId:ossId,
            fileName:fileName,
            url:(baseUrl.includes('http://localhost') ? 'http://10.118.2.186:31200/' : baseUrl) +prefixPath+'/'+url+'/'+fileName,
            uid:v.file.uid
        })
    }
}
function imgObjFun(v:any){
    let obj:any = {
        imageId:v.ossId,
        name:v.fileName,
        uid:v.uid,
        url:new URL(v.url).href, //v.url,
        checked:false
    }
    TData.fileList.push(obj)
    console.log('上传后返回数据',TData.fileList)
}
</script>

子（上传）组件代码

<template>
    <!-- :before-remove="beforeRemove" -->
    <div class="imgUpload">
       <div class="imgUpload-main">
        <div class="imgUpload-imgList" v-for="(itm,idx) in props.fileList" :key="idx" >
            <el-image class="imgUpload-img"  :src="itm.url" />
            <el-checkbox class="imgUpload-check" @change="changeCheck(itm)" v-model="itm.checked" size="large" />
            <div class="imgUpload-ask"  @click="handleRemove(itm)">
                <el-icon><Delete /></el-icon>
            </div>
            <!-- {{ itm }} -->
        </div>
            <el-upload
                v-show="!props.fileList || props.fileList.length<3 "
				:v-model="props.fileList"  // 加了这个导致线上环境图片无法回显，删除此属性问题解决
                :limit="3"
                :show-file-list="false"
                :http-request="httpRequest"
                :on-preview="handlePictureCardPreview"
                >
        <el-icon><Plus /></el-icon>
        </el-upload>
       </div>
    </div>
</template>

<script lang="ts" setup>
const props = defineProps({
    fileList:{
        type:Array as PropType<any[]>,
        default:()=>[]
    },
    size:{
        type:Number,
        default:'10' //单位k
    }
})

async function httpRequest(v:any){
    return new Promise<any>(async(resolve, reject) => {
        if(v.file.size/1024 > props.size){
            ElMessage({
                type:'warning',
                message:`上传图片大小不能超过 ${ props.size/1024 >1 ? (props.size/1024 + 'M') :(props.size+'K')}`
            })
            reject() 
        }else{
            $emit('httpRequest',v)
        }
    })
}
//移除文件
const handleRemove = (file:any) => {
    $emit('removeFile',file.imageId)
}

function changeCheck(v:any){
    $emit('changeCheck',v)
}
const $emit=defineEmits(['httpRequest','removeFile','changeCheck'])
</script>

问题在于 el-upload 中，加了v-model属性导致，问题代码如下所示

<el-upload
   v-show="!props.fileList || props.fileList.length<3 "
   :v-model="props.fileList"  // 加了这个导致线上环境图片无法回显，删除此属性问题解决
   :limit="3"
   :show-file-list="false"
   :http-request="httpRequest"
   :on-preview="handlePictureCardPreview"
   >
  <el-icon><Plus /></el-icon>
</el-upload>