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 )