vue封装独立组件：elementUI图片上传组件封装，包括el-upload使用方法、图片上传整个流程、处理上传限制数量且超出不显示上传按钮、axios二次封装代码、代码具有可扩展性以及详细说明

<template>
  <el-upload
    :action="uploadUrl"
    :headers="uploadHeaders"
    :on-success="handleSuccess"
    :on-error="handleError"
    :before-upload="beforeUpload"
    list-type="picture-card"
    :on-preview="handlePictureCardPreview"
    :on-remove="handleRemove">
    <i class="el-icon-plus"></i>
  </el-upload>
  <el-dialog :visible.sync="dialogVisible">
    <img width="100%" :src="dialogImageUrl" alt="">
  </el-dialog>
</template>
 
<script>
export default {
  data() {
    return {
      uploadUrl: '你的上传接口地址',
      uploadHeaders: { 'Authorization': 'Bearer ' + sessionStorage.getItem('token') },
      dialogImageUrl: '',
      dialogVisible: false
    };
  },
  methods: {
    handleSuccess(response, file, fileList) {
      // 成功处理逻辑
      console.log('File uploaded successfully:', response);
    },
    handleError(err, file, fileList) {
      // 错误处理逻辑
      console.error('Error during upload:', err);
    },
    beforeUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLT2M = file.size / 1024 / 1024 < 2;
 
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLT2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLT2M;
    },
    handleRemove(file, fileList) {
      // 移除图片处理逻辑
      console.log('File removed:', file);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    }
  }
}
</script>

这个简单的封装展示了如何使用Element UI的<el-upload>组件来实现图片的上传功能。它包括了上传成功、失败的处理，以及在移除图片和预览图片时的逻辑。这个封装可以作为开发者在自己的Vue项目中使用或者进一步开发的基础。