安装:
npm install --save vue-croppa 或者 <script src="https://unpkg.com/vue-croppa/dist/vue-croppa.min.js"></script>
页面引入css
在 index.js中
然后页面上直接使用即可
这样就可以使用啦。
img slot="placeholder"这个是默认显示的图片,当默认图片出现跨域问题的时候在调用generateBlob方法会报错这时候需要加上crossOrigin="anonymous"这样就可以正常转化啦
changpic(){ var _this=this this.myCroppa.generateBlob((blob) => { var xmlhttp = null; var formData = new FormData(); //这里连带form里的其他参数也一起提交了,如果不需要提交其他参数可以直接FormData无参数的构造函数 var url =上传的后台服务url; formData.append("imgfile", blob); let config = { formpost:"formpost", headers: { 'Content-Type': 'multipart/form-data' //之前说的以表单传数据的格式来传递fromdata } }; this.$ajax.post(url, formData, config).then( (res) => { if(res.data.return==0) _this.$refs.changimg.refresh()//上传成功用调用刷新,把组件初始化 }else{ _this.$Notice.error({ desc: "上传失败" }); } }) } else { _this.$Notice.error({ desc: res.data.photo }); } }) }, 'image/jpeg', 0.8) }
done