使用element-ui二次封装一个upload上传组件

好的，下面是一个使用 Element UI 二次封装的 Upload 上传组件的示例代码：

<template>
  <div>
    <el-upload
      :action="uploadUrl"
      :headers="headers"
      :data="formData"
      :multiple="multiple"
      :show-file-list="showFileList"
      :limit="limit"
      :on-exceed="onExceed"
      :before-upload="beforeUpload"
      :on-success="onSuccess"
      :on-error="onError"
      :on-progress="onProgress"
    >
      <el-button type="primary" :disabled="uploading">{{ buttonText }}</el-button>
      <div slot="tip" class="el-upload__tip">{{ tip }}</div>
    </el-upload>
  </div>
</template>

<script>
export default {
  name: "MyUpload",
  props: {
    uploadUrl: {
      type: String,
      default: ""
    },
    headers: {
      type: Object,
      default: () => ({})
    },
    formData: {
      type: Object,
      default: () => ({})
    },
    multiple: {
      type: Boolean,
      default: false
    },
    showFileList: {
      type: Boolean,
      default: true
    },
    limit: {
      type: Number,
      default: 0
    },
    buttonText: {
      type: String,
      default: "上传文件"
    },
    tip: {
      type: String,
      default: "只能上传jpg/png文件，且不超过500kb"
    }
  },
  data() {
    return {
      uploading: false
    };
  },
  methods: {
    onExceed(files, fileList) {
      this.$message.warning(`只能上传${this.limit}个文件`);
    },
    beforeUpload(file) {
      const isJPG = file.type === "image/jpeg" || file.type === "image/png";
      const isLt500K = file.size / 1024 < 500;

      if (!isJPG) {
        this.$message.error("上传图片只能是 JPG/PNG 格式!");
        return false;
      }
      if (!isLt500K) {
        this.$message.error("上传图片大小不能超过 500KB!");
        return false;
      }
      return true;
    },
    onSuccess(response, file, fileList) {
      this.uploading = false;
      this.$emit("upload-success", response, file, fileList);
    },
    onError(err, file, fileList) {
      this.uploading = false;
      this.$emit("upload-error", err, file, fileList);
    },
    onProgress(event, file, fileList) {
      this.uploading = true;
      this.$emit("upload-progress", event, file, fileList);
    }
  }
};
</script>

<style>
/* 可以根据自己的需要修改样式 */
.el-upload__tip {
  font-size: 14px;
  color: #999;
  margin-top: 10px;
}
</style>

这个 Upload 组件支持以下 props：

- `uploadUrl`：上传文件的接口地址
- `headers`：上传请求的 headers
- `formData`：上传请求的 formData
- `multiple`：是否支持多选文件
- `showFileList`：是否显示已上传文件列表
- `limit`：最多上传文件个数
- `buttonText`：上传按钮的文本
- `tip`：上传提示信息

这个 Upload 组件还支持以下事件：

- `upload-success`：上传成功的回调函数，参数为 response、file 和 fileList
- `upload-error`：上传失败的回调函数，参数为 err、file 和 fileList
- `upload-progress`：上传进度的回调函数，参数为 event、file 和 fileList

使用示例：

<template>
  <div>
    <my-upload
      :upload-url="uploadUrl"
      :headers="headers"
      :form-data="formData"
      :multiple="multiple"
      :show-file-list="showFileList"
      :limit="limit"
      :button-text="buttonText"
      :tip="tip"
      @upload-success="onUploadSuccess"
      @upload-error="onUploadError"
      @upload-progress="onUploadProgress"
    ></my-upload>
  </div>
</template>

<script>
import MyUpload from "@/components/MyUpload";

export default {
  components: {
    MyUpload
  },
  data() {
    return {
      uploadUrl: "https://xxx.com/upload",
      headers: {
        token: "xxx"
      },
      formData: {
        type: "avatar"
      },
      multiple: false,
      showFileList: true,
      limit: 1,
      buttonText: "上传头像",
      tip: "只能上传jpg/png文件，且不超过500kb"
    };
  },
  methods: {
    onUploadSuccess(response, file, fileList) {
      console.log("上传成功", response, file, fileList);
    },
    onUploadError(err, file, fileList) {
      console.log("上传失败", err, file, fileList);
    },
    onUploadProgress(event, file, fileList) {
      console.log("上传进度", event, file, fileList);
    }
  }
};
</script>