如果Element UI的上传成功图片无法回显,可能有以下几个原因:

  1. 未正确设置回显属性:在上传成功后,需要设置show-file-listtrue,并将回显的图片地址赋值给file-list属性。例如:
<el-upload
  class="avatar-uploader"
  action="/upload"
  :show-file-list="true"
  :file-list="fileList"
  :on-success="handleUploadSuccess"
  :before-upload="beforeAvatarUpload">
  <img v-if="imageUrl" :src="imageUrl" class="avatar">
  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
  1. 未正确处理上传成功回调函数:在上传成功后,需要在回调函数中将图片地址保存到fileList属性中。例如:
data() {
  return {
    fileList: [],
    imageUrl: ''
  };
},
methods: {
  handleUploadSuccess(response, file, fileList) {
    const imageUrl = response.data.url; // 假设返回的数据中有图片地址字段
    this.imageUrl = imageUrl;
    this.fileList = fileList;
  },
  beforeAvatarUpload(file) {
    // ...
  }
}
  1. 图片地址无效:检查返回的图片地址是否正确,可以在浏览器中尝试直接访问该地址,确认图片是否能正常加载。

  2. 样式问题:检查图片的样式是否正确设置,比如宽度、高度是否被覆盖或设置为0,导致无法显示。

如果仍然无法解决问题,可以提供更多的代码和错误信息,以便更好地帮助你解决问题

elementui上传成功图片回显不了

原文地址: https://www.cveoy.top/t/topic/ihCC 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录