dy-admin-manager/src/components/Upload/index.vue

<template>
  <div class="upload">
    <el-upload class="avatar-uploader"
               style="line-height: 0;display: inline-block"
               action="/api-web/uploadFile"
               :headers="headers"
               :show-file-list="false"
               v-loading="uploadImgLoading"
               :accept="accept"
               :on-success="handleImgSuccess"
               :on-error="handleUploadImgError"
               :before-upload="beforeImgUpload">
      <img v-if="imgUrl"
           :src="imgUrl"
           class="avatar" />
      <i v-else
         class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
  </div>
</template>

<script>
import load from "@/utils/loading";
import { getToken } from "@/utils/auth";
export default {
  data () {
    return {
      headers: {
        Authorization: getToken()
      },
      uploadImgLoading: false,
      imgUrl: null,
    };
  },
  props: {
    value: {
      // 组件状态
      type: String,
    },
    accept: {
      type: String,
      default () {
        return '.jpg, .jpeg, .png, .gif'
      }
    },
    imageSizeM: { // 默认2M
      type: Number,
      default () {
        return 2
      }
    },
    imageWidthM: { // 默认2M
      type: Number,
      default () {
        return null
      }
    },
    imageHeightM: { // 默认2M
      type: Number,
      default () {
        return null
      }
    },
    imageType: { // 检测类型
      type: Object,
      default () {
        return {
          "image/png": true,
          "image/jpeg": true,
          "image/jpg": true,
          "image/gif": true
        }
      }
    }
  },
  mounted () {
    this.imgUrl = this.value
  },
  methods: {
    beforeImgUpload (file) {
      const isImage = this.imageType[file.type];
      const isLt2M = file.size / 1024 / 1024 < this.imageSizeM;
      const imageWidth = this.imageWidthM
      const imageHeigh = this.imageHeightM
      const _URL = window.URL || window.webkitURL
      const isSize = new Promise((resolve, reject) => {
        const img = new Image()
        img.onload = function () {

          if (imageWidth && imageHeigh) {
            this.width === imageWidth && this.height === imageHeigh ? resolve() : reject(`请上传${imageWidth}x${imageHeigh}尺寸图片`)
          } else if (imageWidth && !imageHeigh) {
            this.width === imageWidth ? resolve() : reject(`请上传宽为${imageWidth}的图片`)
          } else if (!imageWidth && imageHeigh) {
            this.height === imageHeigh ? resolve() : reject(`请上传高为${imageHeigh}的图片`)
          }
          else {
            resolve()
          }

        }
        img.src = _URL.createObjectURL(file)
      }).then(
        () => {
          return file
        },
        (src) => {
          this.$message.error(src);
          this.uploadImgLoading = false
          return Promise.reject()
        }
      )
      if (!isImage) {
        this.$message.error("只能上传图片格式!");

      }
      if (!isLt2M) {
        this.$message.error(`上传图片大小不能超过 ${this.imageSizeM}MB!`);
      }
      if (isImage && isLt2M && isSize) {
        this.uploadImgLoading = true
      }
      return isImage && isLt2M && isSize;
    },
    handleUploadImgError (file) {
      this.uploadImgLoading = false
      this.$message.error('上传失败')
    },
    handleImgSuccess (res, file) {
      this.uploadImgLoading = false
      this.imgUrl = res.data.url
      this.$emit('input', res.data.url)
    },
  },
  watch: {
    value (newValue) {
      this.imgUrl = newValue
    },
  },
  beforeDestroy () {
  },
};
</script>

<style lang="scss" scoped>
/deep/.avatar-uploader .el-upload,
/deep/.upload-demo .el-upload {
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  border: 1px dashed #d9d9d9;
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
}
.avatar {
  width: 120px;
  height: 120px;
  display: block;
}
.ivu-upload {
  display: none;
}
</style>