vue3 el-upload上传多张图片

以下是使用Vue3的el-upload组件上传多张图片的示例代码：

<template>
  <el-upload
    class="upload-demo"
    action="/upload"
    :on-success="handleSuccess"
    :before-upload="beforeUpload"
    multiple
    :limit="3"
    :auto-upload="false"
    :file-list="fileList"
  >
    <el-button size="small" type="primary">点击上传</el-button>
    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
  </el-upload>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const fileList = ref([]);

    const beforeUpload = (file) => {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
      const isLt500K = file.size / 1024 < 500;

      if (!isJPG) {
        this.$message.error('只能上传jpg/png文件');
      }
      if (!isLt500K) {
        this.$message.error('文件大小不能超过500kb');
      }

      return isJPG && isLt500K;
    };

    const handleSuccess = (response, file) => {
      this.$message.success('上传成功');      // 处理上传成功后的逻辑
    };

    return {
      fileList,
      beforeUpload,
      handleSuccess,
    };
  },
};
</script>

在上述代码中，我们使用了Vue3的`ref`函数来创建了一个响应式的`fileList`数组，于存储上传的文件列表。`beforeUpload`函数用于在上传之前进行文件类型和大小的校验，只有符合要求的文件才会被上传。`handleSuccess`函数用于处理上传成功后的逻辑，你可以在其中进行图片压缩和合并为zip文件的操作。

请注意，上述代码中的`action`属性需要根据你的实际情况进行修改，以指定上传文件的接口地址。