vue-image-crop-upload使用记录

关于vue-image-crop-upload

vue-image-crop-upload是一款将上传图片，然后再对图片进行剪裁的插件。更多的是网站的上传头像，调整头像的功能。
该组件适用于pc端，不推荐手机端使用。

插件实现：

1、无法选定具体区域
2、进度条控制图片的放大与缩小。
3、上一步的按钮操作是返回至上传图片的步骤。
4、保存的图片是预览的图片，可设置保存图片的宽高。
5、预览图片外框分矩形和圆形。

安装

npm install vue-image-crop-upload

使用

<template>
  <div class="cut-picture">
      <a class="btn" @click="toggleShow">设置头像</a>
        <my-upload field="img"
            @crop-success="cropSuccess"
            @crop-upload-success="cropUploadSuccess"
            @crop-upload-fail="cropUploadFail"
            v-model="show"
            :width="300"
            :height="200"
            url=""
            :params="params"
            :headers="headers"
            :noCircle="true"
            :preview="'图形展示'"
            img-format="png"></my-upload>
        <img :src="imgDataUrl">
  </div>
</template>

<script>
import myUpload from 'vue-image-crop-upload/upload-2.vue';
export default {
    name: '',
    data() {
        return {
            show: true,
			params: {
				token: '123456798',
				name: 'avatar'
			},
			headers: {
				smail: '*_~'
			},
			imgDataUrl: ''
        }
    },
    components: {
        'my-upload': myUpload
    },
    methods: {
        toggleShow() {
            this.show = !this.show;
        },
        cropSuccess(imgDataUrl, field){
            // 裁剪完成
            console.log('-------- crop success --------');
            this.imgDataUrl = imgDataUrl;
        },
        cropUploadSuccess(jsonData, field){
            // 服务器返回成功
            console.log('-------- upload success --------');
            console.log(jsonData);
            console.log('field: ' + field);
        },
        cropUploadFail(status, field){
            // 服务器返回失败
            console.log('-------- upload fail --------');
            console.log(status);
            console.log('field: ' + field);
        }
    }
}
</script>

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 )