图片列表如何选中多个图片

整个画面分为左右两个部分，左边是分组列表，右边是相应的图片列表

左边

<div class="myPictureLeft">
    <a-menu 
        mode="inline"
        @select="handleGroupSelect"
        >
        <a-menu-item key="">全部</a-menu-item>
        <a-menu-item v-for="item in groupsInfo" :key="item.id">{{item.name}}</a-menu-item>
        <a-menu-item
           key="addGroup"
           @click="handleAddGroup"
            >新建分组+</a-menu-item>
    </a-menu>
</div>

右边 

<div class="myPictureRight">
    <div>
        <a-form-item>
            <a-input-search
              placeholder="图片名称关键字搜索"
              v-model:value="formState.keyword"
             /></a-form-item>
        <a-button class="my_picture_search" @click="onSearch">搜索</a-button>
        <a-button class="my_picture_confirm" @click="handleMyPictureOk">确定</a-button>
        <a-button class="my_picture_delete" @click="handleImageDelete">删除</a-button>
        <a-upload
            v-model:fileList="imageList"
            name="file"
            multiple="true"
            :action="uploadUrl"
            :data="uploadParams"
            :headers="headers"
            :before-upload="beforeUpload"
            :show-upload-list="false"
            @change="handleChange"
         >
            <a-button>上传图片</a-button>
          </a-upload>
    </div>
    /* 如果有图片列表 */
    <div v-if="imagesList.length" class="pictures_content">
        /* 遍历图片列表，如果选中了图片就给其加上image-item.selected样式 */
        <div
            v-for="image in imagesList"
            :key="image.id"
            :class="[
              'image-item',
              { selected: selectedImageIds.includes(image.id) },
            ]"
            @click="selectImage(image.id, image.url)"
          >
            <img :src="image.url" style="width: 120px; height: 120px" />
            <div class="image-name">{{ image.name }}</div>
            /* 是否选中时候的不同图片样式 */
            <img
              src="@/assets/images/settings/active_tick.png"
              v-if="selectedImageIds.includes(image.id)"
              class="checkmark"
            />
            <img
              src="@/assets/images/settings/tick.png"
              v-else
              class="checkmark"
            />
        </div>
    </div>
</div>
<script lang="ts" setup>
const imagesList = ref<Image[]>([]); // 获取到的图片列表
const selectedImageIds = ref<number[]>([]); // 选中的图片id列表
const selectedImageUrls = ref<string[]>([]); // 选中的图片路径列表
const uploadParams = ref({}); // 额外的上传参数
// 上传地址
const uploadUrl = ref("");
// 上传请求头
const headers = {
  authorization: "authorization-text",
};
// 点击图片
const selectImage = (id: number, url: string) => {
  /* 查找该id在id数组中的位置*/
  const index = selectedImageIds.value.indexOf(id);
  /* 没找到则返回-1 */
  if (index === -1) {
    // 图片未被选中，添加到选中列表
    selectedImageIds.value.push(id);
    selectedImageUrls.value.push(url);
  } else {
    // 图片已被选中，移除
    selectedImageIds.value.splice(index, 1);
    selectedImageUrls.value.splice(index, 1);
  }
};
// 上传前的处理函数
const beforeUpload = (file: UploadFile, fileList: any) => {
  fileList.length > 1
    ? (uploadUrl.value = "http://10.31.0.76:52001/api/imageUpload/uploads")
    : (uploadUrl.value = "http://10.31.0.76:52001/api/imageUpload/upload");
  uploadParams.value = { shopId: 0, groupId: formState.groupId };
  return true;
};
// 上传后的处理函数
const handleChange = (info: UploadChangeParam) => {
  if (info.file.status !== "uploading") {
    console.log(info.file, info.fileList);
  }
  if (info.file.status === "done") {
    message.success(`${info.file.name} file uploaded successfully`);
  } else if (info.file.status === "error") {
    message.error(`${info.file.name} file upload failed.`);
  }
};
</script>
<style>
.image-item.selected {
    border-radius: 8px 8px 8px 8px;
    border: 1px solid #9ad2bd;
}
</style>