element-plus 实现多个图片上传

element-plus 是一款基于 Vue.js 的组件库，可以方便地实现多个图片上传功能。

首先，我们需要在项目中安装并引入 element-plus 组件库。可以通过 npm 或者 yarn 进行安装，然后在项目的主文件中引入 element-plus 的样式文件和所需的组件，例如：

import { ElUpload, ElButton } from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';

接下来，在 Vue 组件中使用 ElUpload 组件来实现图片上传。我们可以使用 v-for 指令循环渲染多个上传区域，每个区域都有一个独立的上传按钮和对应的图片显示区域。可以在模板中插入以下代码：

<template>
  <div>
    <div v-for="uploadItem in uploadItems" :key="uploadItem.id">
      <el-upload
        class="upload"
        :action="uploadItem.action"
        :limit="uploadItem.limit"
        :on-success="handleUploadSuccess"
      >
        <el-button size="small" type="primary">选择图片</el-button>
      </el-upload>
      <div class="image-list">
        <img v-for="url in uploadItem.imageList" :key="url" :src="url" />
      </div>
    </div>
  </div>
</template>

在 data 中定义一个数组 uploadItems，用来存储每个上传区域的相关配置信息，包括上传地址、上传限制等。可以在 created 钩子函数中初始化 uploadItems 数组：

export default {
  data() {
    return {
      uploadItems: [
        { id: 1, action: '/upload', limit: 3, imageList: [] },
        { id: 2, action: '/upload', limit: 5, imageList: [] },
        // 可以根据需要继续添加更多的上传区域配置
      ]
    };
  },
  // ...
}

最后，实现 handleUploadSuccess 方法，在上传成功后将图片的 URL 添加到对应的 uploadItem.imageList 数组中：

export default {
  // ...
  methods: {
    handleUploadSuccess(response, file, uploadItem) {
      uploadItem.imageList.push(response.url);
    }
  }
}

通过以上方法，在页面中就可以实现多个图片上传功能了。每个上传区域都独立管理自己的图片列表，方便实现一次性上传多个图片的需求。