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