利用vue-cropper做的关于图片裁剪、压缩、上传、预览等做的一个公共组件

利用vue-cropper做的关于图片裁剪、压缩、上传、预览等做的一个公共组件

<template>
  <div>
    <div class="upload-box">
      <div class="image-box"
           v-if="imageUrl"
           :style="{'background-image': 'url('+ imageUrl +')', 'height': imageHeight}"></div>
      <div class="upload">
        <h6 class="upload-des">支持 jpg、png 格式大小 5M 以内的图片</h6>
        <input type="file" @change="getFile" ref="file" id="file">
        <label for="file">点击上传</label>
      </div>
    </div>
    <!-- vueCropper 剪裁图片实现-->
    <div class="vue-cropper-box" v-if="isShowCropper">
      <div class="vue-cropper-content">
        <vueCropper ref="cropper"
                    :img="option.img"
                    :outputSize="option.outputSize"
                    :outputType="option.outputType"
                    :info="option.info"
                    :canScale="option.canScale"
                    :autoCrop="option.autoCrop"
                    :autoCropWidth="option.autoCropWidth"
                    :autoCropHeight="option.autoCropHeight"
                    :fixed="option.fixed"
                    :fixedNumber="option.fixedNumber">
        </vueCropper>
      </div>
    </div>
    <el-button v-if="isShowCropper" type="danger" @click="onCubeImg">确定裁剪图片</el-button>
  </div>
</template>
<script>
  import VueCropper from "vue-cropper"
  export default {
    name: 'Avatar',

    data () {
      return {
        //裁剪组件的基础配置option
        option: {
          img: '', //裁剪图片的地址
          info: true, //裁剪框的大小信息
          outputSize: 1, // 裁剪生成图片的质量
          outputType: 'png', //裁剪生成图片的格式
          canScale: false, // 图片是否允许滚轮缩放
          autoCrop: true, // 是否默认生成截图框
          autoCropWidth: 195, // 默认生成截图框宽度
          autoCropHeight: 10, // 默认生成截图框高度
          fixed: false, //是否开启截图框宽高固定比例
          fixedNumber: [1, 1] //截图框的宽高比例
        },
        isShowCropper: false //是否显示截图框
      }
    },

    props: {
      // 特殊配置
      cropperOption: {
        type: Object,
        default: () => {
          return null
        }
      },
      // 默认图片
      imageUrl: {
        type: String,
        default: ''
      },
      // 图片展示高度
      imageHeight: {
        type: String,
        default: '100px'
      }
    },

    components: {
      VueCropper
    },

    methods: {
      getFile (e) {
        let _this = this
        var files = e.target.files[0]
        if (!e || !window.FileReader) return // 看支持不支持FileReader
        let reader = new FileReader()
        reader.readAsDataURL(files)
        reader.onloadend = function () {
          _this.isShowCropper = true
          _this.option.img = this.result
          _this.$refs.file.value = ''
        }
      },

      // 确定裁剪图片
      onCubeImg () {
        this.$refs.cropper.getCropData((data) => {
          this.isShowCropper = false
          //console.log("压缩前的图片大小：" + data.length)
          let img = new Image(),
            _this = this
          img.src = data
          img.onload = function() {
            //let _data = _this.compress(img)
            let blob = _this.dataURItoBlob(data)

            let formData = new FormData()
            formData.append("icon", blob)
            //console.log("将blob对象转成formData对象：" + formData.get("icon"))
            _this.$emit('cropped', data, formData)
          }
        })
      },

      // 压缩图片 
      compress(img) {
        let canvas = document.createElement("canvas"),
          ctx = canvas.getContext("2d"),
          initSize = img.src.length,
          width = img.width,
          height = img.height;
        canvas.width = width
        canvas.height = height
        // 铺底色 
        ctx.fillStyle = "#fff"
        ctx.fillRect(0, 0, canvas.width, canvas.height)
        ctx.drawImage(img, 0, 0, width, height)
        //进行压缩 
        let ndata = canvas.toDataURL("image/jpeg", 0.8)
        //console.log("压缩后的图片大小：" + ndata.length)
        return ndata
      }, 
      // base64转成bolb对象 
      dataURItoBlob(base64Data) { 
        let byteString
        if (base64Data.split(",")[0].indexOf("base64") >= 0) 
          byteString = atob(base64Data.split(",")[1])
        else 
          byteString = unescape(base64Data.split(",")[1])
        let mimeString = base64Data .split(",")[0] .split(":")[1] .split(";")[0]; 
        let ia = new Uint8Array(byteString.length); 
        for (let i = 0; i < byteString.length; i++) { 
            ia[i] = byteString.charCodeAt(i); 
        } 
        return new Blob([ia], { type: mimeString })
      },

      // 初始化配置文件
      initOptions () {
        this.isShowCropper = false
        if (this.cropperOption) {
          for (let key in this.option) {
            this.option[key] = this.cropperOption[key] || this.option[key]
          }
        }
      }
    },

    created () {
      this.initOptions()
    }
  }
</script>
<style scoped lang="stylus" rel="stylesheet">
  .upload-box {
    & > div {
      display inline-block
      vertical-align middle
    }
    & .upload-des {
      margin 0
      font-weight 400
      color #909399
    }
  }

  .image-box {
    width 100px
    height 100px
    margin-right 20px
    background-size 100px auto
    background-position left center
    background-repeat no-repeat
  }

  .upload {
    & label {
      width: 80px;
      height: 24px;
      font-size: 12px;
      line-height: 24px;
      display: inline-block;
      border-radius: 4px;
      text-align: center;
      border: 1px solid #ddd;
      cursor pointer
    }
  }

  input[type='file'] {
    display: none;
  }

  .vue-cropper-box {
    width: 60%;
    height: 200px;
    margin: 15px 0px;
    .vue-cropper-content {
      height 200px
    }
  }
</style>

调用

<el-form-item label="头像" prop="icon" :rules="rules.required">
　　<Avatar v-on:cropped="doCrop"
　　:cropperOption="cropperOption"
　　:imageUrl="guestInfo.icon"></Avatar>
</el-form-item>

注意下面这个二进制文件接收和上传的问题

resetForm(){
　　this.$nextTick(() => {
　　　　this.$refs.guest.clearValidate()
　　　　this.guestUpInfo = new FormData()
　　})
},

//完成裁剪
doCrop(icon, file){
　　this.guestInfo.icon = icon
　　this.guestUpInfo = file
}

//新增、编辑提交
submitGuest(){
    validCallback(this, 'guest', () => {
      this.guestUpInfo.append('name',this.guestInfo.name)
      this.guestUpInfo.append('position',this.guestInfo.position)
      this.guestUpInfo.append('description',this.guestInfo.description)
      if(this.guestInfo.seq){
        this.guestUpInfo.append('seq',this.guestInfo.seq)
      }
      if(this.editGuest){
        this.guestUpInfo.append('id',this.guestInfo.id)
      }

      publicSubmitApi('saveSpeaker', this.guestUpInfo, true).then(res => {
        if (res.status === 200) {
          this.guestShow = false
          this.fetchData()
          this.$message({
            message: this.editGuest ? '编辑成功' : '新增成功',
            type: 'success'
          })
        }
      })
    })
},