el-upload 上传 照片墙上传照片，上传一张之后，上传框就消失

在 Vue 中，如果你想使用 Element UI 的 `el-upload` 实现照片墙的功能，允许用户上传一张照片后自动清除上传按钮，你可以这样做：

1. 创建一个模板，包含一个 `el-upload` 组件，设置 `list-type` 为 `picture-card` 来显示图片缩略图，并设定 `multiple` 为 `false` 因为我们只允许一次上传：

<template>
  <div class="photo-wall">
    <el-upload
      :action="uploadUrl"
      :on-success="handleSuccess"
      list-type="picture-card"
      :limit="1" // 控制最多只能上传一张图片
      ref="upload"
      :auto-upload="true" // 自动上传
      @success="clearUploadForm"
    >
      <i v-if="!hasFiles" class="el-icon-plus">点击上传照片</i>
      <template v-if="hasFiles">
        <el-image :src="latestImage" style="width:100%; cursor:pointer" @click="clearLatestImage"></el-image>
      </template>
    </el-upload>
  </div>
</template>

2. 添加数据属性来管理状态，比如是否已经上传过照片 (`hasFiles`) 和最新的图片 URL (`latestImage`)：

data() {
  return {
    hasFiles: false,
    latestImage: '',
    uploadUrl: 'your-uploads-api', // 替换为你的上传接口
  };
},

3. 定义一些方法，如上传成功后的回调 `handleSuccess`，以及清除上传表单的 `clearUploadForm` 和清除最新图片的 `clearLatestImage`：

methods: {
  handleSuccess(response) {
    this.hasFiles = true;
    this.latestImage = response.data.url; // 假设返回的数据包含图片URL
  },
  clearUploadForm(e) {
    e.preventDefault(); // 阻止默认的清除操作
    this.$refs.upload.clearFiles(); // 清除当前文件
    this.hasFiles = false;
    this.clearLatestImage();
  },
  clearLatestImage() {
    this.latestImage = '';
  },
},

4. 为了实现图片预览效果，你可以考虑配合 Vue 自带的事件监听，例如使用 `@mouseenter` 和 `@mouseleave` 监听图片的鼠标进入和离开事件。

当你上传一张照片后，`handleSuccess` 会被触发，更新状态并将上传按钮隐藏（因为已上传）。通过 `clearUploadForm` 方法，你可以清除上传文件并且清空 `latestImage`。

注意：以上代码示例假设你的服务器API返回包含图片URL的信息，如果你的API有所不同，请相应调整。另外，关于样式部分，你可能需要自行处理 `i` 元素的显示和隐藏逻辑。