elementUI组件upload上传后图片不显示问题

最新推荐文章于 2025-11-28 04:56:28 发布

原创最新推荐文章于 2025-11-28 04:56:28 发布 · 6.3k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #elementui

本文介绍了在前端开发中如何调用图片上传接口，并处理上传成功后返回的图片路径，确保图片在页面上正确显示。通过设置上传前、删除、成功等钩子函数，以及在`handleSwiperSuccess`中拼接完整URL，实现了图片的顺利展示。此方法适用于前端开发人员在遇到类似问题时进行参考。

在开发中调用上传图片的接口

<el-upload
    :before-upload="beforePicUpload" //! 上传w判断
    :on-remove="handleSwiperRemove" //! 文件删除时的钩子
    :on-success="handleSwiperSuccess" // 文件上传成功时的钩子
    action="/api/upload/pic" //!图片上传的地址根据实际开发修改
    class="avatar-uploader"
    list-type="picture-card"
    multiple
    ref="SwiperlUpload"
    >
    <el-button
      size="small"
      type="primary"
     >点击上传</el-button>
  </el-upload>

上传后的数据返回

以上的方法会自动上传图片.上传成功后会调用成功的钩子函数,由于后端返回的路径是这样的
在这里插入图片描述
不显示的效果:

这时需要在成功上传的函数中做以下操作,在file.url下拼接:地址+图片路径

handleSwiperSuccess(response, file, fileList) {
	//! 拼接地址和图片路径 地址根据开发修改
      file.url = 'http://supw.work:8989' + response.data.url;
      console.log("轮播图打印file",file)
      this.form.urls.push({img:response.data.url});
   },