vue+element+vue-cropper实现图片裁剪功能

vue+element+vue-cropper实现图片裁剪功能

1、下载插件：npm install --save vue-cropper
2、全局注册插件挂在到全局的vue上 

import { VueCropper } from 'vue-cropper';

Vue.component('VueCropper',VueCropper);

html部分：

element 的el-upload插件

上传图片插件

              class="avatar-uploader"

              :action="UPLOAD_FILE"

              :show-file-list="false"

              :on-change="selectImgFn"

              :auto-upload="false"

              :before-upload="beforeUpload">

             

             

       

裁剪图片框：

        

              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"

              :fixedBox="option.fixedBox"

              :fixedNumber="option.fixedNumber"

            >

js

data部分：

export default {

  data() {

    return {

        fileName："",

        newImgUrl:"",

        option: {

            img: '', // 裁剪图片的地址

            info: true, // 裁剪框的大小信息

            outputSize: 0.8, // 裁剪生成图片的质量

            outputType: 'png', // 裁剪生成图片的格式

            canScale: false, // 图片是否允许滚轮缩放

            autoCrop: true, // 是否默认生成截图框

            autoCropWidth: 300, // 默认生成截图框宽度

            autoCropHeight: 210, // 默认生成截图框高度

            fixedBox: true, // 固定截图框大小 不允许改变

            fixed: true, // 是否开启截图框宽高固定比例

            fixedNumber: [3, 1], // 截图框的宽高比例

            full: true, // 是否输出原图比例的截图

            canMoveBox: false, // 截图框能否拖动

            original: false, // 上传图片按照原始比例渲染

            centerBox: false, // 截图框是否被限制在图片里面

            infoTrue: true, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高

            canMove:true,

        fileinfo:{}

      },

    }

  }

上传图片部分：

// 文件上传el-upload需要用到on-change方法其他的方法回触发自动上传

    selectImgFn(file) {

      this.fileName = file.name;

      if (!/\.(jpg|jpeg|png|JPG|PNG)$/.test(file.name)) {

        this.$message({

          message: '图片类型要求：jpeg、jpg、png',

          type: "error"

        });

        return false

      }

    在插件上展示图片

      this.option.img = URL.createObjectURL(file.raw);

    },

裁剪完之后上传

    finish(){

      this.$refs.cropper.getCropBlob((data) => {

        // let file = new File([data], this.fileName, {type: this.fileName.split('.')[1]});

        // data转换为bolb之后是没有name的,后段接收到file之后需要获取到文件的名称；

        data.name=this.fileName;

        console.log('data',data);

        upload(this.actionsUlr,data).then(res=>{

          if(res.Data == 200){

            this.newImgUrl = res.Data;

          }

        });

      });

    }

上传图片js封装

import axios from 'axios'

export function upload(api, file) {

  var data = new FormData()

  data.append('file', file)

  return axios.post(api, data,)

}

备注：弹窗这里没有添加，自己用el-dialog就可以了

页面效果：