element 上传图片去除上传后的图片显示

在使用element组件库进行图片上传时，如果需要去除上传完成后的图片显示，可以通过以下步骤实现：

首先，需要使用element的上传组件进行图片上传。在该组件中，我们可以设置一个响应事件，用于接收上传成功后的图片信息。

在响应事件中，我们可以使用一个变量（例如imageURL）来保存上传成功后的图片地址。当图片上传成功时，我们可以将该变量赋值为上传成功后的图片地址。

接下来，在页面中的图片显示区域，可以使用v-if指令来判断是否需要显示上传后的图片。具体来说，可以设置一个条件，当imageURL不为空时，显示上传后的图片；否则，不显示图片。

通过以上步骤，当图片上传成功后，图片显示区域会根据条件判断进行显示或隐藏。这样就可以实现去除上传后的图片显示的效果。

需要注意的是，以上仅是一种实现方法，具体可以根据实际情况进行调整和修改，以满足具体的项目需求。

相关问题

element 上传图片 回显

Element UI 中提供了 `el-upload` 组件用于上传文件，可以通过设置 `:show-file-list="false"` 来禁止上传成功后在页面上显示已上传的文件信息，而是通过 `:on-success` 回调函数获取上传成功后的返回值进行处理，进而实现图片上传成功后的回显。

以下是一个示例代码：

<template>
  <el-upload
    class="avatar-uploader"
    action="/upload"
    :on-success="handleSuccess"
    :show-file-list="false"
    :before-upload="beforeAvatarUpload">
    <img v-if="imageUrl" :src="imageUrl" class="avatar">
    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
  </el-upload>
</template>

<script>
  export default {
    data() {
      return {
        imageUrl: ''
      }
    },
    methods: {
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg'
        const isPNG = file.type === 'image/png'
        const isLt2M = file.size / 1024 / 1024 < 2

        if (!isJPG && !isPNG) {
          this.$message.error('上传头像图片只能是 JPG/PNG 格式!')
          return false
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!')
          return false
        }
        return true
      },
      handleSuccess(response, file, fileList) {
        this.imageUrl = URL.createObjectURL(file.raw)
        // 可以将response中的图片地址保存到数据库中，以便之后再次访问时显示已上传的图片
        console.log(response)
      }
    }
  }
</script>

<style>
  .avatar-uploader {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 120px;
    height: 120px;
    border: 1px dashed #d9d9d9;
    border-radius: 50%;
    overflow: hidden;
    background-color: #f7f7f7;
  }

  .avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    transition: all .3s;
  }

  .avatar-uploader:hover .avatar-uploader-icon {
    color: #409EFF;
  }
</style>

在 `handleSuccess` 回调函数中，通过 `URL.createObjectURL` 方法将上传成功后的文件转换成本地 URL 地址，再将其赋值给 `imageUrl` 变量，即可实现图片上传成功后的回显。

element上传只显示一张图

当使用element上传组件时，只显示一张图片可能有几个原因。

首先，可能是因为上传组件的属性设置了`multiple`为`false`，这意味着只能上传一张图片。如果需要上传多张图片，可以将`multiple`属性设置为`true`。

其次，可能是因为在上传图片时限制了图片数量。可以通过设定`limit`属性来限制图片的数量，如果上传的图片数量超过了限制，则只会显示其中的一张图片。

另外，还可能是因为在服务器端设置了只接受一张图片的规则。当在上传图片时，服务器端会检查上传的文件数量，如果超过设定的限制，则只会处理其中的一张图片，其他的图片会被忽略。

此外，上传组件也有可能出现bug，导致只显示一张图片。如果遇到这种情况，可以检查element的版本是否有更新，或者尝试重新安装element组件，以解决可能的bug问题。

总之，只显示一张图片可能是由于属性设置、上传限制或其他原因导致的。要解决这个问题，可以检查上传组件的属性设置，服务器端的配置以及组件的版本等因素，以确定原因并采取相应的解决方法。