vue-cropper ​

<template>
  <a-modal v-model="visible" title="裁剪" :width="1000">
    <template slot="footer">
      <a-button @click="handleCancel"> 取消 </a-button>
      <a-button type="primary" @click="handleOk"> 确认 </a-button>
    </template>
    <div class="cropper">
        <vueCropper
          ref="cropper"
          :img="option.img"
          :outputSize="option.size"
          :outputType="option.outputType"
          :info="true"
          :full="option.full"
          :canMove="option.canMove"
          :canMoveBox="option.canMoveBox"
          :original="option.original"
          :autoCrop="option.autoCrop"
          :fixed="option.fixed"
          :fixedNumber="option.fixedNumber"
          :centerBox="option.centerBox"
          :infoTrue="option.infoTrue"
          :fixedBox="option.fixedBox"
          :autoCropWidth="option.autoCropWidth"
          :autoCropHeight="option.autoCropHeight"
          @realTime="realTime"
        ></vueCropper>
      </div>
      <div v-html="previews"></div>//预览
    </div>
  </a-modal>
</template>
<script>
import BMF from 'browser-md5-file'
const bmf = new BMF()
export default {
  props: {
    fixedNumber: {//自定义截图框比例
      type: Array,
      default:()=>[1,1]
  data() {
    return {
      visible: false,
      option: {
        img: '', // 裁剪图片的地址
        info: true, // 裁剪框的大小信息
        outputSize: 1, // 裁剪生成图片的质量
        outputType: 'jpeg', // 裁剪生成图片的格式
        canScale: false, // 图片是否允许滚轮缩放
        canMove: true,
        autoCrop: true, // 是否默认生成截图框
        autoCropWidth: this.fixedNumber[0] * 100, // 默认生成截图框宽度
        autoCropHeight: this.fixedNumber[1] * 100, // 默认生成截图框高度
        fixedBox: false, // 固定截图框大小 不允许改变
        fixed: true, // 是否开启截图框宽高固定比例
        fixedNumber: this.fixedNumber, // 截图框的宽高比例
        full: true, // 是否输出原图比例的截图
        canMoveBox: true, // 截图框能否拖动
        original: false, // 上传图片按照原始比例渲染
        centerBox: true, // 截图框是否被限制在图片里面
        infoTrue: true, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
      fileName: null,
      previews: null,
  methods: {
    realTime(data) {
      this.previews = data.html
    openModal(file) {
      //file: 父组件传入的文件对象
      this.visible = true
      let _this = this
      let temp = window.URL.createObjectURL(new Blob([file]))
      // get filename suffix
      const _arr = file.name.split('.')
      const suffix = _arr[_arr.length - 1]
      this.option.img = temp
      bmf.md5(file, (err, md5) => {
        _this.fileName = `${md5}.${suffix}`
    handleOk() {
      let _this = this
      this.$refs.cropper.getCropBlob(data => {//内置方法,获取截图的 blob 数据
        _this.$emit("updateImg",{ fileName: _this.fileName, blob: data })//点击确认后将文件名和图片的blob数据传入父组件中
      this.visible = false
    handleCancel() {
      this.visible = false
</script>
<style scoped lang='less'>
.cropper {
  display: flex;
  justify-content: space-around;
  div {
    width: 400px;
    height: 400px;
  & > :last-child {
    margin: 0 auto;
    background-color: #666666;
    position: relative;
    ::v-deep .show-preview { /*这里style是scope模式 要用v-deep样式穿透样式才会生效*/
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
</style>

<template>
  <div class="upload-wrapper">
    <div class="upload-container">
      <div class="preview-img">
        <a-spin tip="正在上传..." :spinning="loading">
          <img :src="logoUrl" v-if="logoUrl" />
        </a-spin>
      </div>
      <div class="mask">
        <div @click="showModal">
          <a-icon class="pre-icon" type="eye"></a-icon>
          <span class="pre-text">预览</span>
          <a-modal v-model="visible" title="预览" :footer="null" :centered="true" @ok="showModal">
            <img :src="logoUrl" v-if="logoUrl" width="100%" />
          </a-modal>
        </div>
        <div @click="$refs.inputFile.click()">
          <a-icon class="icon" type="plus" />
          <span class="text">点击上传</span>
        </div>
      </div>
    </div>
    <div class="name">
      <span>园区LOGO - 小</span>
      <span style="font-size: 12px">推荐尺寸：32 x 32</span>
    </div>
    <!-- upload input -->
    <input ref="inputFile" type="file" @change="cropperUpload" style="display: none" />
    <cropper-modal ref="cropperModal" @updateImg="updateImg" :fixedNumber="[1, 1]" />
  </div>
</template>
<script>
import { getOssSignature } from '@/api/upload'
import { editClientInfo } from '@/api/user'
import cropperModal from '@/components/cropper'
export default {
  name: 'UploadLogoMini',
  components: {
    cropperModal,
  data() {
    return {
      logoUrl: '',
      loading: false,
      visible: false,
  computed: {
    userInfo() {
      return this.$store.getters.userInfo
  methods: {
    startUpload(file, fileName) {//开始上传
      this.loading = true
      const _this = this
      getOssSignature().then(res => {
        const obj = res.result
        const formData = new FormData()
        formData.append('OSSAccessKeyId', obj.accessId)
        formData.append('policy', obj.policy)
        formData.append('signature', obj.signature)
        formData.append('key', `${obj.dir}${fileName}`)
        formData.append('success_action_status', '200') // 指定返回的状态码
        formData.append('file', file)
        const url = `${obj.maintainHost}/${obj.dir}${random}${fileName}`
        axios
          .post(obj.host, formData, {
            headers: { 'Content-Type': 'multipart/form-data' },
          .then(res => {
            editClientInfo({ clientId: _this.$ls.get('clientId'), appMiNiImg: url })
            _this.logoUrl = url
            _this.$store.commit('UPDATE_APP_MINI_IMG', url)
          .finally(() => {
            _this.loading = false
    cropperUpload(e) {
      const file = e.target.files[0]
      const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg'
      if (!isJpgOrPng) {
        this.$message.error('图片格式不正确，请上传格式为 .jpg/.jpeg/.png 的图片！')
      const isLt5M = file.size / 1024 / 1024 < 5
      if (!isLt5M) {
        this.$message.error('图片大小超过5MB！')
      let temp = window.URL.createObjectURL(new Blob([file]))
      this.src = temp
      this.$refs.cropperModal.openModal(file)//将文件对象传入cropper组件中
      this.$refs.inputFile.value = null;
    showModal() {
      this.visible = !this.visible
    updateImg(fileObj) {
      //接收子组件传入的参数,执行上传
      this.startUpload(fileObj.blob, fileObj.fileName)
</script>