安装：npm install vue-image-crop-upload --save （作为开发依赖安装）
使用：import myUpload from 'vue-image-crop-upload';
<div id="app"><a class="btn" @click="toggleShow">设置头像</a><my-upload field="img"@crop-success="cropSuccess"@crop-upload-success="cropUploadSuccess"@crop-upload-fail="cropUploadFail"v-model="show":width="300":height="300"url="/upload":params="params":headers="headers"img-format="png"></my-upload><img :src="imgDataUrl"></div><script>import 'babel-polyfill'; // es6 shimimport Vue from 'vue';import myUpload from 'vue-image-crop-upload';new Vue({el: '#app',data: {show: true,params: {token: '123456798',name: 'avatar'},headers: {smail: '*_~'},imgDataUrl: '' // the datebase64 url of created image},components: {'my-upload': myUpload},methods: {toggleShow() {this.show = !this.show;}, /** * crop success * * [param] imgDataUrl * [param] field */cropSuccess(imgDataUrl, field){console.log('-------- crop success --------');this.imgDataUrl = imgDataUrl;},/** * upload success * * [param] jsonData 服务器返回数据，已进行json转码 * [param] field */cropUploadSuccess(jsonData, field){console.log('-------- upload success --------');console.log(jsonData);console.log('field: ' + field);},/** * upload fail * * [param] status server api return error status, like 500 * [param] field */cropUploadFail(status, field){console.log('-------- upload fail --------');console.log(status);console.log('field: ' + field);}}});</script>
另一个比较好用的vue头像 裁剪git地址https://zhanziyang.github.io/vue-croppa/#/
