colexiu-project/src/components/col-cropper/index.tsx

import { ElImage, ElMessage, ElUpload } from 'element-plus'
import { defineComponent } from 'vue'
import styles from './index.module.less'
import iconUpload from '../col-upload/images/icon_upload.png'
import Cropper from './cropper'

export default defineComponent({
  name: 'col-cropper',
  props: {
    modelValue: {
      type: String,
      default: ''
    },
    options: {
      // 裁切需要参数
      type: Object,
      default: {
        autoCrop: true, //是否默认生成截图框
        enlarge: 1, //  图片放大倍数
        autoCropWidth: 200, //默认生成截图框宽度
        autoCropHeight: 200, //默认生成截图框高度
        fixedBox: true, //是否固定截图框大小 不允许改变
        previewsCircle: true, //预览图是否是原圆形
        title: '上传图片'
      }
    },
    // 显示图片原始图片
    showSize: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
    delete: {
      type: Boolean,
      default: false
    },
    bucket: {
      type: String,
      default: 'daya'
    },
    size: {
      type: Number,
      default: 5 // 默认5M
    },
    accept: {
      type: String,
      default: '.png,.jpg,.jpeg'
    },
    tips: {
      type: String,
      default: '请上传图片'
    },
    extraTips: {
      type: String,
      default: '图片最大不能超过5MB'
    },
    cropUploadSuccess: {
      type: Function,
      default: (data: string) => ({})
    },
    onRemove: {
      type: Function,
      default: (data: string) => ({})
    },
    domSize: {
      type: Object,
      default: {
        width: '150px',
        height: '85px'
      }
    }
  },
  data() {
    return {
      isStopRun: false,
      loading: false
    }
  },
  methods: {
    onDelete() {
      // 删除图片
      this.$emit('update:modelValue', '')
    },

    //从本地选择文件
    async handleChange(info: any) {
      if (this.isStopRun) {
        return
      }
      this.loading = true
      const options = this.options
      this.getBase64(info.file, (imageUrl: any) => {
        const target = Object.assign({}, options, {
          img: imageUrl,
          name: info.file.name // 上传文件名
        })
        ;(this as any).$refs.CropperModal.edit(target)
      })
    },
    // 上传之前 格式与大小校验
    beforeUpload(file) {
      this.isStopRun = false
      const fileType = file.type
      if (fileType.indexOf('image') < 0) {
        ElMessage.warning('请上传图片')
        this.isStopRun = true
        return false
      }
      // const isJpgOrPng = this.acceptArray.includes(file.type)
      // if (!isJpgOrPng) {
      //   ElMessage.error('你上传图片格式不正确!')
      //   this.isStopRun = true
      // }
      // console.log(this.size)
      const size = this.size || 0
      const isLtSize = file.size < size * 1024 * 1024
      if (!isLtSize) {
        ElMessage.error('图片大小不能超过' + this.size + 'MB!')
        this.isStopRun = true
      }
      return isLtSize
    },
    error() {
      this.onDelete()
      this.loading = false
    },
    //获取服务器返回的地址
    handleCropperSuccess(data: any) {
      //将返回的数据回显
      this.loading = false
      // console.log(data, 'success')
      this.$emit('update:modelValue', data)
      this.cropUploadSuccess(data)
      // this.$emit('cropUploadSuccess', data)
      // console.log(this.modelValue, 'modelValue')
    },
    // 取消上传
    handleCropperClose() {
      this.loading = false
      this.onDelete()
    },
    getBase64(img, callback) {
      const reader = new FileReader()
      reader.addEventListener('load', () => callback(reader.result))
      reader.readAsDataURL(img)
    }
  },
  render() {
    return (
      <div class={[styles.colUpload, 'w-full']} style={{ lineHeight: 0 }}>
        <ElUpload
          disabled={this.disabled}
          showFileList={false}
          accept={this.accept}
          beforeUpload={this.beforeUpload}
          // @ts-ignore
          httpRequest={this.handleChange}
          // limit={1}
          ref="uploadRef"
        >
          <div
            ref="uploadDom"
            class={[styles.uploadClass, 'w-full']}
            style={{ height: this.domSize.height, width: this.domSize.width }}
          >
            {this.modelValue ? (
              <div class="relative">
                <ElImage
                  src={this.modelValue}
                  fit="cover"
                  style={{
                    height: this.domSize.height,
                    width: this.domSize.width
                  }}
                  class={styles.uploadSection}
                />
                {this.delete && (
                  <i
                    class={styles.iconDelete}
                    onClick={(e: any) => {
                      e.stopPropagation()
                      this.onRemove()
                    }}
                  ></i>
                )}
              </div>
            ) : (
              <div
                class={[
                  styles.uploadSection,
                  'flex items-center flex-col justify-center'
                ]}
                style={{
                  height: this.domSize.height,
                  width: this.domSize.width
                }}
              >
                <img src={iconUpload} class="w-8 h-7 mb-3" />
                <p>{this.tips}</p>
              </div>
            )}
          </div>
        </ElUpload>

        <p class="text-3 text-[#999999] leading-6 pt-1">{this.extraTips}</p>

        <Cropper
          ref="CropperModal"
          bucket={this.bucket}
          cropperNo={this.handleCropperClose}
          cropperOk={this.handleCropperSuccess}
        />
      </div>
    )
  }
})