1 安装 vue-cropper

npm install vue-cropper

2 在需要调用的页面引入

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

demo

js代码，注意我同时引进了其它的组件

import Vue from 'vue'
import VueCropper from 'vue-cropper';
Vue.use(VueCropper);
import { Toast } from 'vant';
import TopBar from '../../components/TopBar.vue'

Vue.use(Toast);

export default {
  name: 'SetHeadimg',
  components:{TopBar},
  data() {
    return {
      options: {
        autoCrop: true, //默认生成截图框
        fixedBox: true, //固定截图框大小
        canMoveBox: false, //截图框不能拖动
        centerBox: false, //截图框被限制在图片里面
        autoCropWidth:150,  //截图框宽度
        autoCropHeight:150, //截图框高度        
      },
      previews: {}, //实时预览图数据
      attach: {
        //后端附件表
        id: "",
        userId: "",
        customaryUrl: "", //原图片路径
        laterUrl: "", //裁剪后图片路径  /static/logo.png
        attachType: "photo" //附件类型
      },
	  upText:'上传图片'
    };
  },
  methods: {
    //实时预览
    realTime(data) {
      this.previews = data;
    },
    //点击图片调取input
    clickUpload(){
      this.$refs.filElem.dispatchEvent(new MouseEvent('click')) 
    },
    //选择本地图片
    uploadImg(e, num) {
      var file = e.target.files[0];
      if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)) {
        Toast("图片类型必须是.gif,jpeg,jpg,png,bmp中的一种");
        return false;
      }
      //fileReader 接口，用于异步读取文件数据
      var reader = new FileReader();
      reader.readAsDataURL(file); //重要 以dataURL形式读取文件
      reader.onload = e => {
        // data = window.URL.createObjectURL(new Blob([e.target.result])) 转化为blob格式
        let data = e.target.result;
        this.attach.customaryUrl = data;
        // 转化为base64
        // reader.readAsDataURL(file)
        // 转化为blob
      };
	  
	  
	  this.upText = '确认修改';
    },
    //确认截图,上传
    confirm(type) {
		//判断上传图片为空，则上传
		if(!this.attach.customaryUrl){
			this.clickUpload();
		}
		
		//上传
		let that = this;
		this.$refs.cropper.getCropData(res => {
			this.axios.post('/api/member/updateHeadImg',this.$qs.stringify({userid:this.$cookies.get("userId"),headImg:res})).then(function(response) {	
				if(response.data.sta == 1){
					Toast({
						icon:'passed',
						message:response.data.msg,
						onClose:function(){that.$router.push('/set');}
					});
					
				}else{
					Toast.fail('操作失败');
				}
				
			}).catch(function(error) {console.log(error);});
		});
    },
	
	//取消
	handleClose(){
		window.history.back();
	}
	
  }
};

css代码

/* 头像预览 */

.show-preview{
	padding:10px;
}
.show-preview .preview {
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid #cccccc;
  background: #cccccc;
  width: 150px !important;
  height: 150px !important;
  margin:0 auto;
}
.show-preview .title{
	padding:5px;
	text-align:center;
}

.upload-img{
	display:block;
	margin:10px auto;
	
}

.contro{
	text-align:center;
	padding:15px;
}


#uploads{
	display:none;
}

html代码

<div class="setHeadImg">
	<TopBar  title="上传头像" rtext=" "></TopBar>

	<!-- 裁剪 -->
	<vueCropper
	  style="width:100%;height:300px"
	  ref="cropper"
	  :img="attach.customaryUrl"
	  :autoCrop="options.autoCrop"
	  :fixedBox="options.fixedBox"
	  :canMoveBox="options.canMoveBox"
	  :autoCropWidth="options.autoCropWidth"
	  :autoCropHeight="options.autoCropHeight"
	  :centerBox="options.centerBox"
	  @realTime="realTime"
	></vueCropper>
	

	
	
	<div class="show-preview">
	  <div :style="previews.div" class="preview">
		<img :src="previews.url" :style="previews.img" width="100%" />
	  </div>
	  <h2 class="title">头像预览</h2>
	</div>


	<input 
		ref="filElem"
		type="file"
		id="uploads"
		accept="image/png, image/jpeg, image/gif, image/jpg"
		@change="uploadImg($event,1)"
		class="el-button hide"
		style="margin-bottom:15px"
	  />
	<div class="contro">
	  <van-button @click="confirm('blob')" square type="primary">{{upText}}</van-button>&nbsp;&nbsp;
	  <van-button plain @click="handleClose" type="info" size="normal">取消</van-button>
	</div>

 
</div>

效果图

插件相关文档