vue element上传图片——vueCropper裁剪图片(封装vueCropper组件)

npm i vue-cropper -S

<el-form-item label="医院头像：">
          <el-upload class="avatar-uploader"
                     accept=".jpg,.jpeg,.png"
                     :action='""'
                     :show-file-list="false"
                     :auto-upload="false"
                     :on-change='changeUpload'>
          
            <div v-if="locationImage"
                 class="avatar">
              <img :src="locationImage">
              <div class="delete-img"
                   @click.stop="delAvator">×</div>
            </div>
            <i v-else
               class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>

<!-- vueCropper 剪裁图片实现-->
    <cropper :show="dialogCrop"
             :option="option"
             @finishCrop="finishCrop"
             @closeCrop="closeCrop"></cropper>

dialogCrop: false, // 裁剪图片弹框 
      // 裁剪组件的基础配置option
      option: {
        img: '', // 裁剪图片的地址
        info: true, // 裁剪框的大小信息
        outputSize: 0.8, // 裁剪生成图片的质量
        outputType: 'jpeg', // 裁剪生成图片的格式
        canScale: false, // 图片是否允许滚轮缩放
        autoCrop: true, // 是否默认生成截图框
        autoCropWidth: 200, // 默认生成截图框宽度
        autoCropHeight: 200, // 默认生成截图框高度
        fixedBox: true, // 固定截图框大小 不允许改变
        fixed: true, // 是否开启截图框宽高固定比例
        fixedNumber: [5, 5], // 截图框的宽高比例
        full: true, // 是否输出原图比例的截图
        canMoveBox: false, // 截图框能否拖动
        original: false, // 上传图片按照原始比例渲染
        centerBox: false, // 截图框是否被限制在图片里面
        infoTrue: true // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
      }

 components: {
    cropper
  },

changeUpload (file, fileList) {
      // console.log("change", file, fileList)
      const isJPG = file.raw.type === 'image/jpeg' || file.raw.type === 'image/png' || file.raw.type === 'image/jpg';
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 或 PNG 格式!');
        return
      }
      this.$nextTick(() => {
        var reader = new FileReader();
        reader.readAsDataURL(file.raw)
        reader.onload = e => {
          let data = e.target.result
          this.option.img = data
          this.dialogCrop = true
        }
      })
    },
    // 确认裁剪
    finishCrop (e) {
      console.log(e)
      this.locationImage = e.imgUrl
      this.editForm.coverImage = e.imgId
      this.dialogCrop = e.show
      this.$message.success("上传成功")
    },
    // 关闭裁剪框
    closeCrop (e) {
      console.log(e)
      this.dialogCrop = e.show
    },

vueCropper

在components 下新建组件cropper.vue

<template>
  <div>
    <el-dialog title="图片剪裁"
               :visible.sync="show"
               width="600px">
      <div class="cropper-content">
        <div class="cropper"
             style="text-align:center">
          <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"></vueCropper>
        </div>
      </div>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="closeCrop">取 消</el-button>
        <el-button type="primary"
                   @click="confirmCrop"
                   :loading="loading">确 认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    show: {
      type: Boolean,
      default: false
    },
    option: {
      type: Object,
      default: {}
    }
  },
  data () {
    return {
      loading: false,
      baseUrl: process.env.VUE_APP_BASEURL, 
    }
  },
  methods: {
    closeCrop () {
      this.$emit('closeCrop', { show: false })
    },
    confirmCrop () {
      this.loading = true
      this.$refs.cropper.getCropBlob((data) => {
        console.log(data)
        let formData = new FormData()
        formData.append("file", data);
        this.$http(this.baseUrl + "/api/sys/files/upload", 'post', formData, 'upload').then(res => {
          console.log(res)
          if (res.code == 200) {
            let reader = new FileReader();
            reader.readAsDataURL(data);
            reader.onload = e => {
              let data = {
                imgUrl: e.target.result, // base64
                imgId: res.data,
                show: false
              }
              this.$emit("finishCrop", data)
              this.loading = true
            }
          }
        })
      })
    }
  },
  mounted () {

  },
}
</script>

<style scoped lang="scss">
.cropper-content {
  .cropper {
    width: auto;
    height: 300px;
  }
}
</style>

process.env.VUE_APP_BASEURL 得自己建立环境文件