el-upload 批量上传图片 示例代码

当使用Vue的el-upload组件进行批量上传图片时，你可以按照以下示例代码进行操作：

<template>
  <el-upload
    class="upload-demo"
    action="/your-upload-url"
    :multiple="true"
    :on-success="handleSuccess"
    :before-upload="beforeUpload"
    :limit="3"
    :auto-upload="false"
    :file-list="fileList"
  >
    <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
    <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过3个文件</div>
  </el-upload>
</template>

<script>
export default {
  data() {
    return {
      fileList: []
    };
  },
  methods: {
    handleSuccess(response, file, fileList) {
      // 上传成功的回调函数
      console.log(response);
    },
    beforeUpload(file) {
      // 上传前的钩子函数
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传图片只能是 JPG/PNG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!');
      }

      return isJPG && isLt2M;
    },
    submitUpload() {
      // 手动触发上传
      this.$refs.upload.submit();
    }
  }
};
</script>

在上面的示例代码中，我们使用了`el-upload`组件来实现批量上传图片的功能。其中，`action`属性指定了上传图片的接口地址，`multiple`属性设置为`true`表示可以选择多个文件进行上传。`on-success`属性指定了上传成功后的回调函数，`before-upload`属性指定了上传前的钩子函数，可以在这里进行一些文件格式和大小的校验。`limit`属性设置了最多可以上传的文件数量，`auto-upload`属性设置为`false`表示不自动上传，需要手动触发上传。`file-list`属性用于绑定已选择的文件列表。

在`handleSuccess`方法中，你可以处理上传成功后的逻辑，比如展示上传成功的图片或者保存上传成功的文件路径等。

在`beforeUpload`方法中，你可以进行一些文件格式和大小的校验，并返回`true`或`false`来决定是否继续上传。

最后，在`submitUpload`方法中，我们通过`this.$refs.upload.submit()`手动触发上传操作。

希望以上代码能够帮助到你，如果还有其他问题，请随时提问。