element-plus批量上传图片

Element Plus 是一个基于 Vue 3 的组件库，它是 Element UI 的官方继承版本，用于构建桌面端的优雅和高质量的用户界面。在 Element Plus 中，有一个组件叫 `Upload`，它支持文件的上传功能。对于批量上传图片，你可以通过设置 `Upload` 组件的 `multiple` 属性来实现，这样就可以一次性选择多个文件进行上传。

以下是一个简单的示例代码，展示如何使用 Element Plus 实现批量上传图片的功能：

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

<script>
export default {
  methods: {
    handleSuccess(response, file, fileList) {
      console.log('File uploaded successfully:', response, file, fileList);
    },
    handleError(err, file, fileList) {
      console.log('File upload failed:', err, file, fileList);
    },
    beforeUpload(file) {
      // 可以在这里添加一些限制条件，比如文件类型、大小等
      const isLt500kb = file.size / 1024 < 500;
      const isJPGorPNG = file.type === 'image/jpeg' || file.type === 'image/png';
      if (!isJPGorPNG) {
        this.$message.error('只支持 JPG 或 PNG 格式的图片');
      }
      if (!isLt500kb) {
        this.$message.error('图片大小不能超过 500KB!');
      }
      return isJPGorPNG && isLt500kb;
    }
  }
}
</script>

在这个例子中，我们使用了 `el-upload` 组件，并且设置了 `multiple` 属性为 `true`，这允许用户选择多个文件进行上传。我们还使用了 `before-upload` 钩子函数来限制用户只能上传小于500KB的JPG或PNG格式的图片，并且在上传成功和失败时使用 `on-success` 和 `on-error` 属性来处理结果。