element開發 - 多個upload組件綁定同一函數的解決方法

參考網上大神，終於可以少寫幾個函數了。涉及到閉包。

html：

    <el-form :model="form" label-width="160px">
      <el-form-item label="商品封面" style="height: 90px;">
        <el-upload
          :action="uploadUrl" multiple :limit='1' :file-list="fileList_1"
          :class="{'disabled':fileList_1.length >= 1}" list-type="picture-card"
          :on-success="(rep,file,fileList)=>handleSuccess(rep,file,fileList,1)"
          :on-error="(err,file,fileList)=>handleError(err,file,fileList,1)"
          :on-remove="(file,fileList)=>handleRemove(file,fileList,1)"
          :on-exceed="handleExceed"
          :on-preview="handlePictureCardPreview">
          <i class="el-icon-plus"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="商品輪播" style="height: 90px;">
        <el-upload
          :action="uploadUrl" multiple :limit='4' :file-list="fileList_2"
          :class="{'disabled':fileList_2.length >= 4}" list-type="picture-card"
          :on-success="(rep,file,fileList)=>handleSuccess(rep,file,fileList,2)"
          :on-error="(err,file,fileList)=>handleError(err,file,fileList,2)"
          :on-remove="(file,fileList)=>handleRemove(file,fileList,2)"
          :on-exceed="handleExceed"
          :on-preview="handlePictureCardPreview">
          <i class="el-icon-plus"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="商品詳情" style="height: 90px;">
        <el-upload
          :action="uploadUrl" multiple :limit='4' :file-list="fileList_3"
          :class="{'disabled':fileList_3.length >= 4}" list-type="picture-card"
          :on-success="(rep,file,fileList)=>handleSuccess(rep,file,fileList,3)"
          :on-error="(err,file,fileList)=>handleError(err,file,fileList,3)"
          :on-remove="(file,fileList)=>handleRemove(file,fileList,3)"
          :on-exceed="handleExceed"
          :on-preview="handlePictureCardPreview">
          <i class="el-icon-plus"></i>
        </el-upload>
      </el-form-item>
    </el-form>
      
    <!-- 圖片預覽 -->
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>

data：

    return {
	  uploadUrl: 'https://jsonplaceholder.typicode.com/posts/',
      form: {
        homeImgId: '',
        carouselImgIds: [],
        detailImgIds: [],
      },

      fileList_1: [],
      fileList_2: [],
      fileList_3: [],
      
      dialogImageUrl: '', // 預覽圖片路徑
      dialogVisible: false, // 預覽對話框是否可見
    }
    

methods：

	// 成功
    handleSuccess(rep, file, fileList, index) {
      this.$message.success('上傳成功')
      this['fileList_' + index] = fileList
    },
    // 失敗
    handleError(err, file, fileList, index) {
      this.$message.error('上傳失敗')
      this['fileList_' + index] = fileList
    },
    // 移除
    handleRemove(file, fileList, index) {
      this.$message.success('刪除成功')
      this['fileList_' + index] = fileList
    },
    // 超出限制
    handleExceed(file, fileList) {
      this.$message.warning('超出圖片上傳數量限制！')
    },
    // 預覽
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    

css：

	// 圖片
	/deep/ .el-upload--picture-card, /deep/ .el-upload-list__item {width: 90px;height: 90px;position: relative;} // 盒子大小
	/deep/ .el-icon-plus {width: 28px;height: 28px; position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto;} // 加號位置
	/deep/ .disabled .el-upload--picture-card {display: none} // 超出數量限制隱藏上傳按鈕