vue2.0 使用vue-cropper裁剪图片并上传服务器

插件地址 ： https://github.com/xyxiao001/vue-cropper

项目截图：

1.npm install vue-cropper 安装

2.main.js使用

import VueCropper from 'vue-cropper' 

Vue.use(VueCropper)

3.选择图片

//选择图片
  	selectImage(){
	   	if (!window.plus) return;
	    let _this = this;
        //使用h5plus选择图片
	    plus.gallery.pick(
	        function (file) {
	        	_this.$store.commit('setCropperResult',file); //传值给裁剪页面
                _this.$router.push('/cropper');
	        } , function ( e ) {
    				console.log( "取消选择图片" );
    			}, {filter:"image"}
    	);
  	},

4.cropper页面裁剪 (使用了keep-alive页面缓存的记得在"watch"中监听路由变化并改变option.img的值)

<template>
    <div>
    	<div class="rj-header">
			<mu-appbar :z-depth="0" title="修剪图片">
		      <mu-button flat @click="cancle" color="primary" slot="left">
		         	取消
		      </mu-button>
			  <mu-button flat  @click="confirm" color="primary" slot="right" >确定</mu-button>
		    </mu-appbar>
		</div>
        <div class="cropper-content">
            <div class="cropper" :style="scrollHeight">
                <vueCropper
                    ref="cropper"
                    :img="option.img"
                    :outputSize="option.size"
                    :outputType="option.outputType"
                    :info="true"
                    :full="option.full"
                    :canScale="true"
                    :centerBox="true"
                    :canMove="option.canMove"
                    :canMoveBox="option.canMoveBox"
                    :autoCrop="option.autoCrop"
                    :autoCropWidth="option.autoCropWidth"
                    :autoCropHeight="option.autoCropHeight"
                    :fixedBox="option.fixedBox">
                </vueCropper>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                crap: false,
                previews: {},
                option: {
                img: require('../assets/img/ALD.png'),
                size: 1,
                full: false,
                outputType: 'png',
                canMove: false,
                canMoveBox: true,
                autoCrop: true,
                autoCropWidth: 180,
                autoCropHeight: 180,
                downImg: '#'
            }
        }
    },
    mounted(){
    	this.option.img = this.$store.state.cropperResult;
    },
    computed:{
    	scrollHeight(){
    		return "height:" + ((window.screen.height)) + "px";
    	}
    },
    methods: {
        cancle () {
           this.$router.replace('/my')
        },
        confirm () {
			let _this = this;
            // 获取截图的blob数据
			this.$refs.cropper.getCropBlob((data) => {
			  // do something
				let param = new FormData();
				param.append('file', data, 'image.png');
				let ajaxLoading = _this.$layer.open({
					type: 2
				})
				_this.$http.post(_this.$lib.url + 'space/file', param).then(res => {
					console.log(res)
					if(res.status == 0) {
							let data = {
								avatar:res.data.url
							}
							_this.$http.post(_this.$lib.url + 'user/info', _this.$qs.stringify(data)).then(res => {
								_this.$layer.close(ajaxLoading);
								if(res.status == 0){
									_this.$layer.open({
										content: '上传成功',
										skin: 'msg',
										time: 2
									});
									_this.$router.replace('/my');
								}
							}).catch(err => {})
					} else {
						_this.$layer.open({
							content: res.msg,
							skin: 'msg',
							time: 2 //2秒后自动关闭
						});
					}
				}).catch(err => {})
			})
        },
    },
}
</script>
<style lang="css">
.cropper-content{
  position: fixed;
  z-index: 199;
  width: 100%;
 height: 100%;
}
 .cropper{
    width: 100%;
  }
</style>