vue项目中使用vue-cropper图片裁剪

先安装插件

npm install vue-cropper --save

然后在vue项目中进行引用

import VueCropper from 'vue-cropper'

Vue.use(VueCropper);

HTML部分,用了element ui的上传图片插件

  <div>
    <div class="cropper-content">
      <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"
          :autoCropWidth="option.autoCropWidth"
          :autoCropHeight="option.autoCropHeight"
          :fixedBox="option.fixedBox"
          @realTime="realTime"
        ></vueCropper>
      </div>
      <div class="show-preview" :style="{'width': previews.w + 'px', 'height': previews.h + 'px',  'overflow': 'hidden', 'margin': '5px'}">
        <div :style="previews.div" class="preview">
          <img :src="previews.url" :style="previews.img">
        </div>
      </div>
    </div>

    <div class="footer-btn">
      <div class="scope-btn">
        <el-upload
          class="avatar-uploader"
          action="https://jsonplaceholder.typicode.com/posts/"
          :show-file-list="false"
          :auto-upload="false"
          :on-change="uploads">
          <img v-if="imageUrl" :src="imageUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
<!--        <label class="btn" for="uploads">选择图片</label>
        <input type="file" id="uploads" style="position:absolute; clip:rect(0 0 0 0);" accept="image/png, image/jpeg, image/gif, image/jpg" @change="uploadImg($event, 1)">-->
<!--        <Button type="ghost" @click="rotateLeft"><span style="font-weight: 600;">↺</span></Button>
        <Button type="ghost" @click="rotateRight"><span style="font-weight: 600;">↻</span></Button>-->
        <div @click="uploadImg">上传图片</div>
      </div>
    </div>
  </div>

js部分

  export default {
    data() {
      return {
        crap: false,
        previews: {},
        option: {
          img:
            'http:img1.vued.vanthink.cn/vued751d13a9cb5376b89cb6719e86f591f3.png',
          size: 1,
          full: false, // 输出原图比例截图 props名full
          outputType: 'jpg',
          canMove: true,
          original: false,
          canMoveBox: true,
          autoCrop: true,
          autoCropWidth: 200,
          autoCropHeight: 200,
          fixedBox: false
        },
        downImg: '#',
        imageUrl: ''
      }
    },
    methods: {
      changeScale(num) {
        num = num || 1
        this.$refs.cropper.changeScale(num)
      },
      rotateLeft() {
        this.$refs.cropper.rotateLeft()
      },
      rotateRight() {
        this.$refs.cropper.rotateRight()
      },
      realTime(data) {
        this.previews = data
      },
      uploads(res, file) {
        // this.imageUrl = URL.createObjectURL(file.raw);
        console.log(res.raw);
        this.option.img=URL.createObjectURL(res.raw);
        // this.option.img=this.imageUrl;
      },
      uploadImg(){
        this.$refs.cropper.getCropBlob((data) => {
          console.log(data)    //
        })
      }
    }
  }

css部分,需要注意的是我使用了stylus预处理器

<style lang="stylus" scoped>

.cropper-content {
  display: flex;
  display: -webkit-flex;
  justify-content: flex-end;
  -webkit-justify-content: flex-end;
  .cropper {
    width: 350px;
    height: 300px;
  }
  .show-preview {
    flex: 1;
    -webkit-flex: 1;
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    -webkit-justify-content: center;
    .preview {
      overflow: hidden;
      border: 1px solid #cccccc;
      background: #cccccc;
      margin-left: 40px;
    }
  }
}
.footer-btn {
  margin-top: 30px;
  display: flex;
  display: -webkit-flex;
  justify-content: flex-end;
  -webkit-justify-content: flex-end;
  .scope-btn {
    width: 350px;
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    -webkit-justify-content: space-between;
  }
  .upload-btn {
    flex: 1;
    -webkit-flex: 1;
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    -webkit-justify-content: center;
  }
  .btn {
    outline: none;
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    -webkit-appearance: none;
    text-align: center;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    outline: 0;
    margin: 0;
    -webkit-transition: 0.1s;
    transition: 0.1s;
    font-weight: 500;
    padding: 10px 15px;
    font-size: 12px;
    border-radius: 3px;
    color: #fff;
    background-color: #67c23a;
    border-color: #67c23a;
  }
}
.avatar-uploader{
  border: 1px dashed red;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 178px;
  height: 178px;
  display: block;
}
.avatar-uploader:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

如果需要将文件传给后台，blob格式其实很简单，只需要创建formData，然后将blob塞进去就可以了

 uploadImg(){
        this.$refs.cropper.getCropBlob((data) => {
          const fm=new FormData();
          fm.append('file',data);
          console.log(data)    
 })

参考了接口博客