vue + element + vue-cropper 实现图片裁剪上传

这个地方搞了好久，其实也不能说好久，其实很简单，只不过第一次弄的话，可能会遇到很多坑。

安装 vue-cropper

npm install vue-cropper

使用

main.js里面

import VueCropper from 'vue-cropper'
Vue.use(VueCropper)

关于HTML部分的代码

上传组件不能自动上传，并且要设置一个 on-change 方法。

:auto-upload="false" :on-change="changeUpload"

    
    
    
请上传长宽为1270*622尺寸并且格式为.jpg或.png的图片文件




	
    
      

        

          
        
      
      

        取 消
        确认
      
    

关于js代码

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



	  // 上传按钮   限制图片大小
      changeUpload(file, fileList) {
        let testmsg = file.name.substring(file.name.lastIndexOf('.') + 1)
        const isJPG = testmsg === 'jpg'
        const isPNG = testmsg === 'png'
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isJPG && !isPNG) {
          this.$message.error('上传头像图片只能是 JPG 或 PNG 格式!');
          return
        }
        var reader = new FileReader();
        let data
        reader.onload = (e) => {
          let data;
          if (typeof e.target.result === 'object') {
            // 把Array Buffer转化为blob 如果是base64不需要 
            data = window.URL.createObjectURL(new Blob([e.target.result]))
          }
          else {
            data = e.target.result
          }
        }
        this.$nextTick(() => {
          this.option.img = file.url
          this.dialogVisible = true
        })
      },
      // 点击裁剪，这一步是可以拿到处理后的地址
      finish() {
        this.$refs.cropper.getCropBlob((data) => {
          let fd = new FormData()
          fd.append('file', data)
          this.$http({
            url: `文件上传地址`,
            method: 'post',
            data: fd,
            headers: {
              'Content-Type': 'multipart/form-data'
            }
          }).then(({ data }) => {
            if (data.code === 200) {
              this.inputForm.pic = data.url;  // 返回路径赋值
              this.dialogVisible = false
            } else {
              this.$message.error(data.msg);
            }
          })
        })
      },

坑

我在这个地方陷了好久，一定要设置 cropper 的高度，不然会显示 NaN x NaN