element ui中el-upload上传图片时的索引(index)获取

在Element UI的<el-upload>组件中，可以通过监听before-upload钩子函数来获取将要上传文件的索引。该钩子会在文件上传之前被调用，并传递一个参数file，它是将要上传的文件对象。你可以在这个钩子中返回file对象或false来决定是否继续上传。

以下是一个简单的例子，展示如何在上传图片之前获取索引：

<template>
  <el-upload
    :on-preview="handlePreview"
    :on-remove="handleRemove"
    :before-upload="handleBeforeUpload"
    list-type="picture"
    action="https://jsonplaceholder.typicode.com/posts/"
    multiple>
    <el-button size="small" type="primary">点击上传</el-button>
  </el-upload>
</template>
 
<script>
export default {
  methods: {
    handleBeforeUpload(file, index) {
      console.log('文件索引:', index);
      // 在这里你可以处理文件上传前的逻辑，比如验证文件类型、大小等
      // 返回 `false` 会停止上传
      // 可以返回 `file` 或者 `new Promise` 来处理异步逻辑
      return file;
    },
    handlePreview(file) {
      // 处理文件预览
    },
    handleRemove(file, fileList) {
      // 处理文件移除
    }
  }
}
</script>

在这个例子中，handleBeforeUpload方法就是用来获取文件索引的地方。Element UI在调用这个方法时，会自动传入文件对象和文件列表中该文件的索引。你可以在这个方法中打印索引或者用于其他目的。