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

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

项目截图:

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

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的值)




 

你可能感兴趣的:(Vue2.0)