element ui upload照片墙上传动画

Element UI 提供了一个名为 "Upload" 的组件，它可以帮助开发者构建文件上传功能。在创建图片墙上传动画时，你可以利用 Upload 组件的 "preview-file" 属性来显示预览图，并通过自定义事件处理来自定义上传过程中的视觉反馈。

例如，你可以设置 `file-list` 样式来改变列表项在上传开始、上传中和上传完成时的状态，比如增加加载动画。当文件开始上传时，可以添加一个 "旋转图标" 或者 "进度条" 显示加载状态。当上传成功时，可以切换到已上传的图片缩略图样式，或者更改背景颜色表示已完成。

为了实现这样的效果，你可能会用到 Vue.js 的 `v-if` 和 `v-show` 指令，以及 CSS 动画库如 Vue Awesome Spinners 来展示旋转动画。同时，你可以监听 Upload 组件的 `upload-success` 或 `upload-error` 事件，以便在上传完成后更新状态信息。

下面是一个简化的示例：

<template>
  <el-upload
    :action="uploadUrl"
    list-type="picture-card"
    :auto-upload="false"
    :on-change="handleImageChange"
    :before-upload="beforeUpload"
  >
    <el-button size="small">点击上传</el-button>
  </el-upload>
  <!-- 自定义的上传状态元素 -->
  <transition name="fade">
    <div v-if="showProgress" class="upload-progress">
      <i class="fa fa-spinner fa-spin"></i> 上传中...
    </div>
  </transition>
</template>

<script>
import { mapActions } from 'vuex'
export default {
  methods: {
    ...mapActions(['uploadFile']),
    handleImageChange(file) {
      this.showProgress = true // 显示上传进度
      this.uploadFile(file)
        .then(() => {
          this.showProgress = false // 隐藏上传进度，显示图片预览
        })
        .catch((error) => {
          // 错误处理
        })
    },
    beforeUpload(file) {
      return true // 省略实际验证逻辑
    }
  }
}
</script>

<style scoped>
.upload-progress {
  display: none;
  /* 添加你喜欢的动画样式 */
}
.fade-enter-active,
.fade-leave-active {
  transition: all 0.5s ease;
}
</style>