vue2+elementUI实现多图片展示

可以通过使用`el-upload`组件来实现多图片上传，然后利用`el-carousel`组件展示多张图片。

以下是一个简单的示例代码：

<template>
  <div>
    <el-upload
      class="upload-demo"
      action="/upload"
      :on-success="handleSuccess"
      :before-upload="beforeUpload"
      :file-list="fileList"
      multiple
      list-type="picture-card"
    >
      <i class="el-icon-plus"></i>
    </el-upload>
    <el-carousel :interval="5000">
      <el-carousel-item v-for="(file, index) in fileList" :key="index">
        <img :src="file.url" class="carousel-image">
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fileList: []
    };
  },
  methods: {
    handleSuccess(response, file, fileList) {
      // 上传成功后将图片信息存入fileList中
      this.fileList = fileList.map(file => {
        return {
          url: URL.createObjectURL(file.raw),
          name: file.name
        };
      });
    },
    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;
    }
  }
};
</script>

<style scoped>
.upload-demo {
  margin-bottom: 20px;
}

.carousel-image {
  width: 100%;
  height: 400px;
  object-fit: cover;
}
</style>

在示例中，我们使用`el-upload`组件来实现图片上传，`multiple`属性可以让用户选择多张图片。`before-upload`方法可以控制上传文件的类型和大小。`handleSuccess`方法在上传成功后将图片信息存入`fileList`中。

最后，我们使用`el-carousel`组件来展示所有上传的图片。在`v-for`循环中，使用`el-carousel-item`包裹每一张图片，`img`标签的`src`属性绑定当前图片的URL。通过CSS样式控制图片的宽高比例和填充方式。