详解vue如何封装封装一个上传多张图片的组件

<template>
  <el-upload
    v-model:file-list="upload.fileList"
    :action="upload.action"
    list-type="picture-card"
    :before-upload="upload.before"
    :on-success="upload.success"
    :on-preview="upload.proview"
    :data-fileListCount="upload.fileList.length"
    :name="upload.name"
    :on-remove="upload.remove"
    :limit="upload.limit"
    :on-exceed="upload.exceed"
    class="UploadFile"
    data-cardSize="75px"
  >
    <el-icon>
      <Plus />
    </el-icon>
  </el-upload>
  <el-image-viewer
    :url-list="upload.fileList.map((item) => item.url)"
    v-if="upload.dialogVisible"
    :initial-index="upload.index"
    @close="upload.dialogVisible = false"
    teleported
  />
</template>
  <script setup>
import { reactive, watch } from 'vue';
import { Plus } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';
const props = defineProps({
  imageList: String,
  baseUrl: String,
  limit: Number,
});
const { baseUrl } = { baseUrl: `http://sk.yyds.blue` } || {
  baseUrl: props.baseUrl,
};
watch(
  () => props.imageList,
  (imageList) => {
    upload.fileList = imageList
      ? imageList.split(`,`).map((item) => {
          return {
            url: baseUrl + item,
          };
        })
      : [];
    console.log(upload.fileList);
  }
);
const emit = defineEmits(['getImageUrl']);
const upload = reactive({
  limit: props.limit || 4,
  name: 'file',
  action: '/api/common/upload',
  fileList: props.imageList
    ? props.imageList.split(`,`).map((item) => {
        return {
          url: baseUrl + item,
        };
      })
    : [],
  dialogVisible: false,
  index: 0,
  exceed: () => {
    ElMessage({ type: 'warning', message: `最多上传${upload.limit}张图片` });
  },
  before: (file) => {
    const type = ['image/png', 'image/jpeg', 'image/gif'];
    if (!type.includes(file.type)) {
      ElMessage.error('不支持该类型文件');
      return false;
    }
  },
  proview: (file) => {
    const { url } = file;
    upload.index = upload.fileList.findIndex((item) => item.url === url);
    upload.dialogVisible = true;
  },
  success: (res, uploadFile, uploadFiles) => {
    // console.log(uploadFiles);
    let imageList = uploadFiles
      .map((item) => {
        return {
          url:
            item.response && item.status === `success`
              ? item.response.data.url
              : item.url.split(baseUrl)[1],
        };
      })
      .map((item) => item.url)
      .join(',');
    emit('getImageUrl', imageList);
    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.status === `success`
              ? item.response.data.url
              : item.url.split(baseUrl)[1],
        };
      })
      .map((item) => item.url)
      .join(',');
    emit('getImageUrl', imageList);
  },
  handleClickPreview: () => {
    console.log(1);
  },
});
</script>
  <style lang="scss">
// [data-fileListCount='5'] {
//   .el-upload--picture-card {
//     display: none !important;
//   }
// }
.UploadFile {
  display: flex;
  align-items: center;
  .el-upload-list--picture-card {
    // --el-upload-list-picture-card-size: 70px !important;
    .el-upload-list__item {
      margin-top: 0;
      margin-bottom: 0;
    }
  }
  .el-upload--picture-card {
    // --el-upload-picture-card-size: 70px !important;
  }
  .el-upload-dragger {
    height: 100%;
    display: grid;
    place-content: center;
  }
}
</style>

 
<template>
  <div class="name_inpasd"
    ><b>商品轮播：</b>
    <div class="asdasd">
      <UploadImage
        @getImageUrl="
          (fileList) => {
            avatar = fileList;
          }
        "
        :limit="2"
        :imageList="avatar"
      />
    </div>
  </div>
</template>
<script setup>
import UploadImage from '../../components/UploadImage/index.vue'; //引入创建的组件
const avatar = ref(``); //'/uploads/...png,/uploads/...jpg'
console.log(avatar);
</script>