vue3+ts+elementPlus实现选中图片并且把图片信息放入一个数组中

 在实际需求中，我需要进行和我们在手机图库对图片进行批量操作相同的需求，把选中的图片放入一个数组中，点击添加，把数组发送给后端做处理，下面是我的实现代码

import { ElButton, ElDrawer, ElIcon } from "element-plus";
import { SuccessFilled } from "@element-plus/icons-vue";
<template>
  <el-drawer v-model="visible" :show-close="false" @close="close" size="50%">
    <template #header="{ close }">
      <div class="publish">图片生成结果</div>
    </template>
    <template #default>
      <div class="roll">
        <div class="imageListSty">
          <div class="pubImage" v-for="(item, index) in imgList" :key="index">
            <div @click="handleSelected(item)">
              <el-icon
                class="icon"
                size="30"
                color="#409EFF"
                v-show="isSelected(item)"
              >
                <SuccessFilled />
              </el-icon>
              <img style="display: block; width: 100%" :src="item" alt="" />
            </div>
          </div>
        </div>
      </div>
    </template>

    <template #footer>
      <div style="flex: auto">
        <el-button @click="close" size="large">取消</el-button>
        <el-button @click="close" size="large" type="success">添加</el-button>
      </div>
    </template>
  </el-drawer>
</template>

const selectList = ref<string[]>([]);
const handleSelected = (item: string) => {
  const index = selectList.value.indexOf(item);
  if (index === -1) {
    // 项不在数组中，表示未被选中
    selectList.value.push(item);
  } else {
    // 项在数组中，表示已被选中，移除
    selectList.value.splice(index, 1);
  }
};
const isSelected = (item: string) => {
  // 判断当前项是否在选中的列表中
  return selectList.value.includes(item);
};