Element-UI上传（Upload）与走马灯(Carousel)综合使用以及initial-index的问题

一、项目需求

1.点击上传，可以选择图片，然后把选择的图片文件显示在下方

2.点击对应的图片展示当前选择的图片与其他图片组成的一个轮播图

二、解决方案

<template>
  <div>
    <!-- 商品图片上传
    action:指定图片上传api接口 这里用绝对地址
    on-preview ： 当点击图片时会触发该事件进行预览操作,处理图片预览
    on-remove : 当用户点击图片右上角的X号时触发执行
    on-success：当用户点击上传图片并成功上传时触发
    list-type ：设置预览图片的方式
    headers ：设置上传图片的请求头
    -->
    <el-upload
      :action="uploadURL"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :on-success="handleSuccess"
      list-type="picture"
      :headers="headerObj"
    >
      <el-button type="primary" size="small">点击上传</el-button>
    </el-upload>
    <!-- 预览图片对话框
     autoplay 设置是否自动播放
     type 展示类型
     ref 指代 用于指代整个carousel 组件
    -->
    <el-dialog title="图片预览" :visible.sync="previewVisible" width="50%">
      <el-carousel height="200px" type="card" :autoplay="false" ref="carousel">
        <el-carousel-item v-for="(item,i) in previewPath" :key="i" name="i">
          <img :src="item" class="previewImg" />
        </el-carousel-item>
      </el-carousel>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 上传图片的url地址
      uploadURL: 'http://example/api/private/v1/upload',
      // 图片上传组件的header请求头对象
      headerObj: {
        Authorization: window.sessionStorage.getItem('token')
      },
      // 保存预览图片的地址
      previewPath: [],
      // 控制预览图片对话框的显示和隐藏
      previewVisible: false,
      // 添加商品的表单数据对象
      addForm: {
        // 上传图片信息
        picInfo: []
      }
    }
  },
  methods: {
    //  手动切换轮播图
    setActiveItem(i) {
      if (this.$refs.carousel) {
        // 手动切换幻灯片 setActiveItem(i)(Carousel Methods)
        // 需要切换的幻灯片的索引，从 0 开始；或相应 el-carousel-item 的 name 属性值
        // i 与 name 里面的值绑定 ，i 决定显示那个 name值的 el-carousel-item
        this.$refs.carousel.setActiveItem(i)
        // console.log(i)
      }
    },
    // 当用户点击图片进行预览时执行，处理图片预览
    handlePreview(file) {
      // 当用户点击图片进行预览时执行，处理图片预览
      // 形参file就是用户预览的那个文件  内置参数
      // console.log(file)
      const index = this.previewPath.findIndex(
        item => item === file.response.data.url
      )
      // 调用手动切换轮播图方法
      this.setActiveItem(index)
      // 显示预览图片对话框
      this.previewVisible = true
    },
    // 清除图片时处理 内置参数
    handleRemove(file) {
      // 当用户点击X号删除时执行
      // 形参file就是用户点击删除的文件
      // 获取用户点击删除的那个图片的临时路径
      const filePath = file.response.data.tmp_path
      // 使用findIndex来查找符合条件的索引
      const index = this.addForm.picInfo.findIndex(
        item => item.filePath === filePath
      )
      // 移除索引对应的图片
      this.addForm.picInfo.splice(index, 1)
      this.previewPath.splice(index, 1)
    },
    // 当图片上传成功触发 自带返回的参数
    handleSuccess(response) {
      let pathObj = {
        filePath: response.data.tmp_path
      }
      this.previewPath.push(response.data.url)
      this.addForm.picInfo.push(pathObj)
      // console.log(this.previewPath)
    }
  }
}
</script>
<style lang="less" scoped>
.previewImg {
  width: 100%;
}
</style>

三、坑点

在el-carousel-item标签中加入轮播图中需要放的内容，图片就用img标签吧。值得一提的是initial-index这个属性，文档中的说明是这样的：初始状态激活的幻灯片的索引，从 0 开始。然后我竟天真的认为点击时将图片的索引设置上去就万事大吉了。

而实际效果是这个属性向如上方法只能设置一次，第一次点击图片还能显示正确，后面点击任何一张图之后，在轮播图中还只能显示第一次点击的图。
这样的话就需要使用方法
setActiveItem
说明： 手动切换幻灯片
参数： 需要切换的幻灯片的索引，从 0 开始；或相应 el-carousel-item的 name 属性值