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