el-upload 照片墙切换

为实现el-upload照片墙的切换效果，可以通过以下步骤实现：

1.在el-upload组件中设置show-file-list为false，这样就不会展示图片本身的file，只展示父组件传来的数据信息。

2.设置auto-upload为false，这样就不会自动上传文件，而是通过onchange来触发上传动作，顺便检测类型，确认上传大小等操作。

3.在父组件中维护一个数组，用于存储上传的图片信息。

4.在el-upload组件中设置一个v-for循环，循环展示父组件传来的图片信息。

5.在父组件中设置一个按钮或者其他交互方式，用于切换展示的图片。

6.在按钮的点击事件中，修改展示图片的索引值，从而实现图片的切换效果。

以下是示例代码：

<template>
  <div>
    <el-upload
      class="upload-demo"
      action="/upload"
      :show-file-list="false"
      :auto-upload="false"
      :on-change="handleChange"
    >
      <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
      <div v-for="(item, index) in fileList" :key="index">
        <img :src="item.url" alt="" />
      </div>
    </el-upload>
    <el-button @click="handlePrev">上一张</el-button>
    <el-button @click="handleNext">下一张</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fileList: [], // 存储上传的图片信息
      currentIndex: 0 // 当前展示图片的索引值
    };
  },
  methods: {
    handleChange(file, fileList) {
      // 上传成功后将图片信息存储到fileList中
      this.fileList = fileList;
    },
    handlePrev() {
      // 切换到上一张图片
      if (this.currentIndex > 0) {
        this.currentIndex--;
      }
    },
    handleNext() {
      // 切换到下一张图片
      if (this.currentIndex < this.fileList.length - 1) {
        this.currentIndex++;
      }
    }
  }
};
</script>