npm install vue-image-crop-upload
npm install –save-dev babel-polyfill
<template><div id="app"><button class="btn" @click="toggleShow">设置头像</button><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="Avatar1"url="https://httpbin.org/post"></my-upload><img :src="imgDataUrl"></div>
</template><script>import 'babel-polyfill'; // es6 shimimport myUpload from 'vue-image-crop-upload';export default {data() {return {imgDataUrl: "",show: false,size:2.1}},components: {"my-upload": myUpload},methods: {toggleShow() {this.show = !this.show;},cropSuccess(imgDataUrl, field) {console.log('-------- crop success --------',imgDataUrl, field);},//上传成功回调cropUploadSuccess(jsonData, field){console.log('-------- upload success --------');this.imgDataUrl = jsonData.files.Avatar1;console.log(jsonData);console.log('field: ' + field);},//上传失败回调cropUploadFail(status, field){console.log('-------- upload fail --------');console.log('上传失败状态'+ status);console.log('field: ' + field);}}}
</script>具体使用可以参考官方文档 https://github.com/dai-siki/vue-image-crop-upload