epmet-work-pc/src/components/UploadImages/UploadImages.vue

<template>
  <el-upload :action="uploadUrl"
             :before-upload="beforeImgUpload"
             :data="{ customerId: customerId }"
             :file-list="attachmentList"
             :headers="$getElUploadHeaders()"
             :limit="limit"
             :on-exceed="handleImgExceed"
             :on-preview="handleImgPreview"
             :on-remove="handleImgRemove"
             :on-success="handleImgSuccess"
             :show-file-list="true"
             accept="image/jpg,image/jpeg,image/png"
             class="avatar-uploader"
             list-type="picture-card"
  >
    <i class="el-icon-plus"></i>
  </el-upload>
  <!--  <span style="color: #999"> 点击上传，仅支持图片格式</span>-->
</template>
<script>
export default {
  name: "UploadImages",
  props: {
    limit: {
      type: Number,
      default: 10
    },
    fileList: {
      type: Array,
      default: () => []
    }
  },
  watch: {
    fileList(val) {
      if (JSON.stringify(val) !== JSON.stringify(this.attachmentList)) {
        this.attachmentList = val || []
      }
    }
  },
  data() {
    return {
      uploadUrl: window.SITE_CONFIG["apiURL"] + "/oss/file/upload",
      customerId: localStorage.getItem("customerId"),
      attachmentList: []
    }
  },
  mounted() {
    if (JSON.stringify(this.fileList) !== JSON.stringify(this.attachmentList)) {
      this.attachmentList = this.fileList || []
    }
  },
  methods: {
    //   上传图片
    beforeImgUpload(file) {
      const isLt1M = file.size / 1024 / 1024 < 10;
      const srcType = file.type;
      const format = file.name.split(".").pop();
      if (!isLt1M) {
        this.$message.error("上传文件大小不能超过 10MB!");
        return false;
      }
      if (
          srcType.indexOf("image") == -1
      ) {
        this.$message.error("仅限图片文件!");
        return false;
      }
      return true;
    },
    handleImgSuccess(res, file, fileList) {
      if (res.code === 0 && res.msg === "success") {
        let format = file.name.split(".").pop();
        let srcType = file.raw.type;
        let type = "file";
        if (srcType.indexOf("image") != -1) {
          type = "image";
        }
        if (!this.attachmentList) {
          this.attachmentList = [{
            format,
            originFileName: file.name,
            type,
            url: res.data.url,
          }]
        } else {
          this.attachmentList.push({
            format,
            originFileName: file.name,
            type,
            url: res.data.url,
          });
        }
        this.$emit('change', this.attachmentList.map(item => {
          return {
            originFileName: item.originFileName,
            type: item.type,
            format: item.format,
            url: item.url,
            id: item.id?item.id:''
          }
        }))
      } else {
        this.$message.error(res.msg);
      }
    },
    handleImgPreview(file) {
      window.open(file.url || file.response.data.url);
    },
    handleImgRemove(file) {
      if (file.response) {
        let index = this.attachmentList.findIndex(
            (item) => item.url == file.response.data.url
        );
        this.attachmentList.splice(index, 1);
      } else if (file.url) {
        let index = this.attachmentList.findIndex(
            (item) => item.url == file.url
        );
        this.attachmentList.splice(index, 1);
      }
      this.$emit('change', this.attachmentList.map(item => {
        return {
          originFileName: item.originFileName,
          type: item.type,
          format: item.format,
          url: item.url,
          id: item.id?item.id:''
        }
      }))
    },
    handleImgExceed() {
      this.$message({
        type: "warning",
        message: "文件数量最多不超过" + this.limit + "个",
      });
    },
  }
}
</script>
<style lang="scss" scoped>
/deep/ .el-upload--picture-card {
  line-height: 90px;
  width: 90px;
  height: 90px;
}
/deep/ .el-upload-list--picture-card .el-upload-list__item {
  line-height: 90px;
  width: 90px;
  height: 90px;
}
/deep/ .el-upload-list--picture-card .el-upload-list__item-status-label i {
  position: absolute;
  top: 11px;
  left: 15px;
  margin-top: 0;
}
/deep/ .el-upload-list--picture-card .el-upload-list__item-thumbnail {
  height: auto;
}
</style>