vue 上传图片裁剪

选择图片

 根据需求裁剪图片

 点击保存，上传图片

安装依赖

npm install vue-image-crop-upload

npm install –save-dev babel-polyfill

示例

<template>
<el-card>
  <div id="app">
	<div style="display: flex;flex-wrap: wrap;justify-content: center;align-items: center;width: 280px;">
		<div style="width: 200px;height: 200px;margin-bottom: 10px;box-shadow: 0 3px 3px #e1d9d9;">
			<img :src="imgDataUrl" style="display: block;width:100%;height:100%;">
		</div>
		<el-button class="btn" @click="toggleShow" type="primary">设置头像</el-button>
	</div>
    <my-upload
    @crop-success="cropSuccess"
    @crop-upload-success="cropUploadSuccess"
    @crop-upload-fail="cropUploadFail"
    v-model="show"
    :width="200"
    :height="200"
    img-format="png"
    :size="size"
    langType='zh'
    :noRotate='false'
    field="file"
	:headers="token" 
    :url="urlUpdate"></my-upload>
  </div>
</el-card>
</template>

<script>
	import 'babel-polyfill'; // es6 shim
	import myUpload from 'vue-image-crop-upload';
	export default {
		data() {
		      return {
		        imgDataUrl: "",
		        show: false,
		        size:2.1,
				imageUrl: '',
				urlUpdate: '',
				token: {
					token: ''
				},
		      }
		    },
		    components: {
		      "my-upload": myUpload
		    },
			created(){
				this.token.token = sessionStorage.getItem("token");
				this.urlUpdate = 'http/';//上传图片地址
			},
		    methods: {
		        toggleShow() {
		            this.show = !this.show;
		        },
		        cropSuccess(imgDataUrl, field) {
		            // console.log('-------- crop success --------',imgDataUrl, field);
		        },
		        //上传成功回调
		        cropUploadSuccess(jsonData, field){
		            console.log('-------- upload success --------');
		            console.log(jsonData);
		            this.imgDataUrl = jsonData.avatar;
					this.$parent.$parent.$parent.$parent.$parent.$parent.$parent.getUserInfo();
		            console.log('field: ' + field);
		        },
		        //上传失败回调
		        cropUploadFail(status, field){
		            console.log('-------- upload fail --------');
		            console.log('上传失败状态'+ status);
		            console.log('field: ' + field);
		        },
		    }
		 
		  }
</script>

<style scoped>
	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}

	.avatar-uploader .el-upload: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>

转载地址：vue-image-crop-upload 头像/图片上传组件 - Vition - 博客园