vue图片剪裁上传插件——vue-image-crop-upload示例
npm地址：/package/vue-image-crop-upload
基本使用
1、安装
npm i vue-image-crop-upload
2、组件
<div id="app"><a class="btn" @click="toggleShow">set avatar</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/upload-2.vue';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 server api return data, already json encode* [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>
