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 屬性值