Element upload 封装上传组件

<template>
  <el-upload
    v-loading="loading"
    // 上传的地址
    :action="myUrl"
    // 是否支持多选
    :multiple="false"
    // 文件列表的类型
    list-type="picture-card"
    // 是否立即上传
    :auto-upload="true"
    // 上传文件列表
    :file-list="fileList"
    // 上传前的钩子
    :before-upload="before_Upload"
    // 上传成功的钩子
    :on-success="uploadSuccess"
    class="upCss"
  >
    <i slot="default" class="el-icon-plus"></i>
    <div slot="file" slot-scope="{ file }">
      <div class="upDate flex">
        <p>{{ file.name }}</p>
      </div>
      <span class="el-upload-list__item-actions flex">
        <span
          class="el-upload-list__item-preview"
          @click="handlePictureCardPreview(file)"
        >
          <i class="el-icon-zoom-in"></i>
        </span>
        <span
          class="el-upload-list__item-delete"
          @click="handleRemove(file)"
        >
          <i class="el-icon-delete"></i>
        </span>
      </span>
    </div>
  </el-upload>
</template>
<script>
// 下载文件方法（之前写过，有兴趣的小伙伴可以搜：Base64转File）
import { dataURLtoFile } from "@/utils";
export default {
  props: {
    // 上传文件的地址 必填
    url: { type: String, required: true },
    // 这里是为了当我们没有点击提交时 父组件通过绑定的数组进行删除上传的文件
    value: { type: Array },
    // 这里是为了显示文件
    fileData: { type: Array },
    // 上传文件的格式
    fileType: { type: Array }
  },
  model: {
    prop: "value",
    event: "update"
  },
  data() {
    return {
      myUrl: "",
      fileList: [],
      // 当前上传的文件列表
      arrayModel: [],
      loading: false
    };
  },

  created() {
    // 处理传过来的url 这里我传图片请求头要带token,如果不需要可删除
    this.myUrl = `${this.url}?token=${this.$cookie.get("token")}`;
    // 这里是为了如果传过文件 那么显示出来有文件
    this.fileList = this.fileData;
  },
  methods: {
    // 删除文件是触发的钩子
    handleRemove(file) {
      // 看当前有多少个文件
      for (let i = 0; i < this.fileList.length; i++) {
        // 要删除的文件 == 已经上传过的文件
        if (file.uid == this.fileList[i].uid) {
          // 从文件列表中删除
          this.fileList.splice(i, 1);
          // 发起请求 删除文件
          this.$http({
            url: this.$http.adornUrl(`/sys/file/deleteRelated`),
            method: "post",
            params: fileName: this.arrayModel[i]
          }).then(res=>{
            // 更新绑定的v-model
            this.arrayModel.splice(i, 1);
            this.$emit("update", this.arrayModel);
          }); 
        }
      }
    },

    // 下载文件
    handlePictureCardPreview(file) {
      this.loading = true;
      if (!file.base) {
        this.$message({
          message: "刚刚上传的文件还需要下载？",
          type: "warning"
        });
        return
      }
      // 获取文件Base64格式
      this.$http({
        url: this.$http.adornUrl(`/sys/file/getFile`),
        method: "get",
        params: this.$http.adornParams({
          fileName: file.base
        })
      }).then(({ data }) => {
        // 下载文件
        dataURLtoFile(data.bean, file.name);
      });
    },

    //上传前的操作，一般来判断文件的格式和大小
    before_Upload(file) {
      // 设置默认上传文件格式（不知道的搜 MIME类型 ）
      let myType = [
        "application/msword",
        "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
        "application/pdf"
      ];
      // 和传进来的文件格式合并一下
      if (this.fileType) {
        for (let i = 0; i < this.fileType.length; i++) {
          myType.push(this.fileType[i]);
        }
      }
      const isIMAGE = myType.includes(file.type);
      const isLt = file.size / 1024 / 1024 < 30;
      if (!isIMAGE) {
        this.$message.error("文件上传格式错误！");
        return false;
      }
      if (!isLt) {
        this.$message.error("文件大于30MB！");
        return false;
      }
    },

    // 文件上传成功的钩子
    uploadSuccess(response, file, fileList) {
      if (response.code !== 0) return;
      // 这里 arrayModel 存储的是后端返回的编译后的文件名
      this.arrayModel.push(response.bean);
      // 上传成功则往v-model数据上添加
      this.$emit("update", this.arrayModel);
      // 更新一下 文件列表
      this.fileList = fileList;
    },
    fileRemove(file, fileList) {}
  }
};
</script>

<style scoped lang="scss">
.flex {
  display: flex;
  justify-content: center;
  align-items: center;
}
.upCss {
  /deep/ .el-upload--picture-card {
    width: 100px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  /deep/ .el-upload-list__item {
    width: 100px;
    height: 100px;
  }
}
.el-upload-list__item {
  /deep/ .el-upload-list__item {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.upDate {
  width: 100px;
  height: 100px;
  text-align: center;
  p {
    margin: 2px;
  }
}
/deep/ .el-upload {
  width: 100%;
}
/deep/ .el-upload .el-upload-dragger {
  width: 100%;
}
</style>