vue 上传文件封装组件

vue上传文件的组件XQ

// 样式功能 可按需求调整
<template>
  <div class="LsboxCss">
    <input type="file" @change="fileChange" ref="fileInput" hidden />
    <span class="LsupdateBtnCss" @click="mUpdatebtn"
      ><i class="el-icon-circle-plus"></i>添加文件</span
    >
    <span v-for="(item, index) in fileList" :key="index" class="LsItemCss"
      >{{ item
      }}<i
        class="el-icon-error"
        style="padding: 3px"
        @click="mDelFile(index, item)"
      ></i
    ></span>
    <span style="color: #ff0000" class="LstitleCss">{{ title }}</span>
  </div>
</template>
<script>
export default {
  props: {
    // 提示
    title: {
      default: () => "支持文件格式：pdf、doc、docx  文件大小：200M以内",
    },
    // 上传个数
    number: {
      type: Number,
      default: () => 3,
    },
    //上传格式  文件后缀名
    fileType: {
      type: Array,
      default: () => [".pdf", ".doc", ".docx"],
    },
    // 上传文件的大小 单位M
    fileSize: {
      type: Number,
      default: () => 200,
    },
  },
  data() {
    return {
      fileList: [],
    };
  },
  methods: {
    mDelFile(a, b) {
      console.log(a, b);
      this.fileList.splice(a, 1);
      this.$emit("delFile", b);
    },
    // 添加文件
    mUpdatebtn() {
      if (this.fileList.length < this.number) {
        this.$refs.fileInput.click();
      } else {
        this.$message.error(`上传文件个数不能超过${this.number}`);
      }
    },
    // 文件发生改变
    fileChange(event) {
      const file = event.target.files[0];
      console.log(file, 1);
      // 对文件进行判断 格式
      //获取上传文件的后缀名
      const photoExt = file.name
        .substr(file.name.lastIndexOf("."))
        .toLowerCase();
      console.log(photoExt, 2);
      // 判断
      if (!this.fileType.some((item) => item == photoExt)) {
        this.$message({
          message: "检查文件格式是否符合要求！请重新上传......",
          type: "warning",
        });
        return;
      }
      // 对文件的大小进行判断
      // 转化为int值
      const filesize = Math.round((file.size / 1024) * 100) / 100;
      if (filesize > this.fileSize * 1024) {
        this.$message({
          message: "文件大小超限！请重新上传",
          type: "warning",
        });
        return;
      }
      this.fileList.push(file.name);
      console.log(this.fileList, 2);
      // 传出去的是一个文件
      this.$emit("upLoad", file);
    },
  },
};
</script>
<style lang="scss" scoped>
.LsboxCss {
  height: 100%;
  overflow: auto;
  .LsupdateBtnCss {
    cursor: pointer;
    width: 82px;
    height: 30px;
    margin-right: 10px;
    background: #ffffff;
    border: 1px solid #eeeeee;
    border-radius: 4px;
    font-size: 14px;
    color: #008df0;
    // text-align: right;
    font-weight: 400;
  }
  .LsItemCss {
    cursor: pointer;
    padding: 5px;
    height: 30px;
    line-height: 30px;
    margin-right: 5px;
    background: #ffffff;
    font-size: 14px;
    color: #008df0;
    font-weight: 400;
    box-sizing: border-box;
    &:hover {
      background-color: #ccc;
      border-radius: 4px;
    }
  }
  .LstitleCss {
    font-size: 12px;
    line-height: 35px;
    font-weight: 700;
    color: rgb(255, 0, 0);
  }
}
</style>