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 )