封装 el-upload

最新推荐文章于 2024-03-04 15:10:29 发布

red_paper_zj

最新推荐文章于 2024-03-04 15:10:29 发布

阅读量304

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/red_paper_zj/article/details/130138438

版权

子组件

<template>
  <el-upload
    ref="upload"
    :action="actionUrl"
    :data="formData"
    :file-list="fileList"
    :limit="limitNum"
    :accept="acceptType"
    :headers="headers"
    :before-upload="beforeUpload"
    :on-success="uploadSuccess"
    :on-error="uploadError"
    :on-exceed="exceedFile"
  >
    <slot name="trigger">
      <el-button icon="el-icon-upload" type="primary">{{ buttonText }}</el-button>
    </slot>
    <slot name="tip">
      <div class="el-upload__tip">只能上传{{ acceptType }}文件！</div>
    </slot>
  </el-upload>
</template>

<script>
export default {
  name: "CustomUpload",
  props: {
    actionUrl: { type: String, required: true },
    formData: Object,
    fileList: Array,
    limitNum: { type: Number, default: 3 },
    headers: Object,
    buttonText: { type: String, default: "上传文件" },
    acceptType: { type: String, default: ".xlsx,.xls" }
  },
  methods: {
    beforeUpload(file) {
      var FileExt = file.name.replace(/.+\./, "");
      if (["xls", "xlsx"].indexOf(FileExt.toLowerCase()) === -1) {
        this.$message({
          type: "warning",
          message: "请上传后缀名为xls、xlsx的附件！",
        });
        return false;
      }
      const isLt2M = file.size / 1024 / 1024 < 5;
      if (!isLt2M) {
        this.$message.error("上传文件大小不能超过 5MB!");
      }
      return isLt2M;
    },
    exceedFile(files, fileList) {
      this.$message.warning(`最多只能上传 ${this.limitNum} 个文件`);
    },
    uploadSuccess(response, file, fileList) {
      this.$emit("upload-success", response, file, fileList);
    },
    uploadError(error, file, fileList) {
      this.$emit("upload-error", error, file, fileList);
      this.$message.error("文件上传失败");
    }
  }
};
</script>

父组件

<custom-upload
  action-url="/api/upload"
  :file-list="fileList"
  :headers="headers"
  :accept-type=".pdf,.doc,.docx"
  @upload-success="handleSuccess"
  @upload-error="handleError"
/>