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

<template>
    <div class="ant-upload-preview">
        <div style="width: 100%">
            <el-upload class="avatar-uploader" :class="[disabled ? 'uploadDisabled' : null]" :disabled="disabled" :accept="accept" :show-file-list="false" action :before-upload="beforeUpload" :http-request="handleChange">
                <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                <span v-else>
                    <i v-if="loading" class="el-icon-loading avatar-uploader-icon"></i>
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    <span class="upload-desc">添加上传图片</span>
                </span>
            </el-upload>
        </div>
        <!-- modal -->
        <cropper-modal ref="CropperModal" @cropper-no="handleCropperClose" @cropper-ok="handleCropperSuccess"></cropper-modal>
    </div>
</template>
<script>
import CropperModal from './CropperModal'
export default {
  name: 'ImageCropper',
  components: {
    CropperModal
  },
  props: {
    //图片裁切配置
    options: {
      type: Object,
      default: function() {
        return {
          autoCrop: true, //是否默认生成截图框
          autoCropWidth: 200, //默认生成截图框宽度
          autoCropHeight: 200, //默认生成截图框高度
          fixedBox: false, //是否固定截图框大小 不允许改变
          previewsCircle: true, //预览图是否是原圆形
          title: '上传图片'
        }
      }
    },
    // 上传图片的大小，单位M
    imgSize: {
      type: Number,
      default: 2
    },
    // 图片地址
    imageUrl: {
      type: String,
      default: ''
    },
    accept: {
      type: String,
      default: '.png,.jpg,.jpeg,.gif'
    },
    acceptArray: {
      type: [Array, Object],
      default() {
        return ['image/jpeg', 'image/png', 'image/jpg', 'image/gif']
      }
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      loading: false,
      isStopRun: false
    }
  },

  methods: {
    //从本地选择文件
    handleChange(info) {
      if (this.isStopRun) {
        return
      }
      this.loading = true
      const { options } = this
      console.log(info)
      this.getBase64(info.file, imageUrl => {
        const target = Object.assign({}, options, {
          img: imageUrl,
          name: info.file.name // 上传文件名
        })
        this.$refs.CropperModal.edit(target)
      })
    },
    // 上传之前 格式与大小校验
    beforeUpload(file) {
      this.isStopRun = false
      var fileType = file.type
      if (fileType.indexOf('image') < 0) {
        this.$message.warning('请上传图片')
        this.isStopRun = true
        return false
      }
      const isJpgOrPng = this.acceptArray.includes(file.type)
        // file.type === 'image/jpeg' ||
        // file.type === 'image/png' ||
        // file.type === 'image/jpg'
      if (!isJpgOrPng) {
        this.$message.error('你上传图片格式不正确!')
        this.isStopRun = true
      }
      const isLtSize = file.size < this.imgSize * 1024 * 1024
      if (!isLtSize) {
        this.$message.error('图片大小不能超过' + this.imgSize + 'MB!')
        this.isStopRun = true
      }
      return isJpgOrPng && isLtSize
    },
    //获取服务器返回的地址
    handleCropperSuccess(data) {
      //将返回的数据回显
      this.loading = false
      this.$emit('crop-upload-success', data)
    },
    // 取消上传
    handleCropperClose() {
      this.loading = false
      this.$emit('crop-upload-close')
    },
    getBase64(img, callback) {
      const reader = new FileReader()
      reader.addEventListener('load', () => callback(reader.result))
      reader.readAsDataURL(img)
    }
  }
}
</script>

<style lang="scss" scoped>
.ant-upload-preview {
  background-color: #fff;
  .avatar-uploader {
    .upload-desc {
      position: absolute;
      bottom: 0;
      left: 0;
      color: #ccc;
      font-size: 8px;
      right: 0;
    }
  }
}
::v-deep .avatar-uploader .el-upload--text {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  margin-right: 20px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
::v-deep .avatar-uploader.uploadDisabled {
  .el-upload--text {
    cursor: not-allowed;
    background-color: #f7f7f7;
  }
  .el-upload:hover {
    border-color: #d9d9d9;
  }
}
::v-deep .avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
::v-deep .avatar-uploader-icon {
  font-size: 22px;
  color: #ccc;
  width: 108px;
  height: 108px;
  line-height: 108px;
  text-align: center;
}
::v-deep.avatar {
  width: 108px;
  height: 108px;
  display: block;
}

</style>