vue vue-image-crop-upload 上傳頭像 （點擊取消無效問題）

1、npm install vue-image-crop-upload

2、引入

 import myUpload from 'vue-image-crop-upload'

@Component({
    name: 'Navbar',
    components: {
        Breadcrumb,
        Hamburger,
        'my-upload': myUpload
    }
})

3、templet

    <my-upload field="headImg"
               @crop-upload-success="cropUploadSuccess" :modelValue.sync="uploadHeaderImg.show"（注意：要添加.sync 不然有時點擊關閉、取消按鈕無效）
               :width="300"
               :height="300"
               url="####"
               :params="uploadHeaderImg.params"
               :headers="uploadHeaderImg.headers"
               img-format="png"
               ref="myUpload"
               langType="zh"
    />

4、ts

//變量  
　　　　　imgDataBase64 = this.user.image || ''
        uploadHeaderImg = {
            params: {
                userId: this.user.id
            },
            headers: {
                token: CacheMdole.token.data
            },
            show: false
        }

        // ========================================= 頭像修改
        public updateHeader() {
            this.uploadHeaderImg.show = !this.uploadHeaderImg.show
        }

        cropUploadSuccess(jsonData: ApiResp, field: any) {
            this.imgDataBase64 = jsonData.other          this.uploadHeaderImg.show = !this.uploadHeaderImg.show
            // @ts-ignore
            this.$refs.myUpload.setStep(1)
        }

 

文檔……………………

 

Props

名稱	類型	默認	說明
url	String	''	上傳接口地址，如果為空，圖片不會上傳
method	String	'POST'	上傳方法
field	String	'upload'	向服務器上傳的文件名
value	Boolean	twoWay	是否顯示控件，雙向綁定
params	Object	null	上傳附帶其他數據，格式"{k:v}"
headers	Object	null	上傳header設置，格式"{k:v}"
langType	String	'zh'	語言類型，默認中文
langExt	Object		語言包自行擴展
width	Number	200	最終得到的圖片寬度
height	Number	200	最終得到的圖片高度
imgFormat	string	'png'	jpg/png, 最終得到的圖片格式
imgBgc	string	'#fff'	導出圖片背景色,當imgFormat屬性為jpg時生效
noCircle	Boolean	false	關閉 圓形圖像預覽
noSquare	Boolean	false	關閉 方形圖像預覽
noRotate	Boolean	true	關閉 旋轉圖像功能
withCredentials	Boolean	false	支持跨域

Events

名稱	說明
srcFileSet	用戶選取文件之后, 參數( fileName, fileType, fileSize )
cropSuccess	圖片截取完成事件（上傳前), 參數( imageDataUrl, field )
cropUploadSuccess	上傳成功， 參數( jsonData, field )
cropUploadFail	上傳失敗， 參數( status, field )