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

最新推荐文章于 2025-05-19 11:35:48 发布

guilinfeng

最新推荐文章于 2025-05-19 11:35:48 发布

阅读量490

点赞数 2

CC 4.0 BY-SA版权

分类专栏：前端开发文章标签：服务器 javascript 运维

本文链接：https://blog.csdn.net/guilinfeng/article/details/139856357

场景：使用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,