element上传多张图片

<template>
  <el-upload
    v-model:file-list="upload.fileList"
    :action="upload.action"
    list-type="picture-card"
    :before-upload="upload.before"
    :on-success="upload.success"
    limit
    :on-preview="upload.proview"
    :data-fileListCount="upload.fileList.length"
    :name="upload.name"
    :on-remove="upload.remove"
  >
    <el-icon>
      <Plus />
    </el-icon>
  </el-upload>
 
  <div class="teacherDialog">
    <el-dialog
      v-model="upload.dialogVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <img w-full :src="upload.dialogImageUrl" alt="" style="width: 100%; height: 100%" />
    </el-dialog>
  </div>
</template>
 
<script setup>
  import { ref, reactive, watch } from 'vue';
  import { Plus } from '@element-plus/icons-vue';
 
  const props = defineProps({
    imageList: String,
    domain: String,
  });
  const { domain } = JSON.parse(sessionStorage.getItem('teacherUserInfo')) || {
    domain: props.domain,
  };
 
  watch(
    () => props.imageList,
    (imageList) => {
      upload.fileList = imageList
        ? imageList.split(`,`).map((item) => {
            return {
              url: domain + item,
            };
          })
        : [];
    }
  );
  const emit = defineEmits(['getImageUrl']);
  const upload = reactive({
    name: 'file',
    action: '',
    fileList: props.imageList
      ? props.imageList.split(`,`).map((item) => {
          return {
            url:  item,
          };
        })
      : [],
    dialogImageUrl: '',
    dialogVisible: false,
    before: (file) => {
      const type = ['image/png', 'image/jpeg', 'image/gif'];
      if (!type.includes(file.type)) {
        ElMessage.error('不支持该类型文件');
        return false;
      }
    },
    proview: ({ url }) => {
      console.log(url);
      upload.dialogImageUrl = url;
      upload.dialogVisible = true;
    },
    success: (res, uploadFile, uploadFiles) => {
      console.log(uploadFiles);
      console.log(
        upload.fileList
          .map((item) => {
            return {
              url: item.response ? item.response.data.url : item.url.split(domain)[1],
            };
          })
          .map((item) => item.url)
          .join()
      );
      let imageList = upload.fileList
        .map((item) => {
          return {
            url: item.response ? item.response.data.url : item.url.split(domain)[1],
          };
        })
        .map((item) => item.url)
        .join();
      emit('getImageUrl', imageList);
      // emit(
      //   'getImageUrl',
      //   upload.fileList.map((item) => {
      //     return {
      //       url: item.response.data.url,
      //     };
      //   })
      // );
      ElMessage({ type: res.code === 1 ? `success` : 'warning', message: res.msg });
    },
    remove: (file, files) => {
      console.log(files);
      let imageList = files
        .map((item) => {
          return {
            url: item.response ? item.response.data.url : item.url.split(domain)[1],
          };
        })
        .map((item) => item.url)
        .join();
      emit('getImageUrl', imageList);
    },
  });
</script>
<style scope lang="scss">
  // [data-fileListCount='1'] {
  //   .el-upload--picture-card {
  //     display: none !important;
  //   }
  // }
</style>