vue-croppa使用记

安装：

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