el-upload上传多张图片逻辑代码

以下是一个基本的 el-upload 多张图片上传逻辑代码示例：

<template>
  <el-upload
    class="upload-demo"
    action="/your-upload-api"
    :multiple="true"
    :on-success="handleSuccess"
    :before-upload="beforeUpload"
    :on-exceed="handleExceed"
    :limit="3"
    :file-list="fileList"
    :auto-upload="false"
  >
    <el-button size="small" type="primary">点击上传</el-button>
    <div slot="tip" class="el-upload__tip">
      最多上传 3 张图片，支持 jpg/png 格式
    </div>
  </el-upload>
</template>

<script>
export default {
  data() {
    return {
      fileList: [],
    };
  },
  methods: {
    handleSuccess(response, file, fileList) {
      console.log(response);
      console.log(file);
      console.log(fileList);
    },
    beforeUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isPNG = file.type === 'image/png';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG && !isPNG) {
        this.$message.error('上传图片只能是 JPG/PNG 格式!');
        return false;
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!');
        return false;
      }
      return true;
    },
    handleExceed(files, fileList) {
      this.$message.warning(`只能上传 3 张图片`);
    },
  },
};
</script>

上面的示例代码中，我们使用了 `el-upload` 组件来实现多张图片上传功能。关键属性和方法的说明如下：

- `action`：上传图片的接口地址
- `multiple`：是否支持多文件上传
- `on-success`：上传成功的回调函数
- `before-upload`：上传前的钩子函数，用于校验文件类型和大小
- `on-exceed`：超出文件个数限制时的回调函数
- `limit`：文件个数限制
- `file-list`：已上传文件列表，可以用 `$set` 方法来更新
- `auto-upload`：是否在选取文件后立即上传

以上是一个基本的多张图片上传逻辑代码示例，你可以根据自己的需求来进行调整。