vue-image-crop-upload 頭像/圖片上傳組件

 

安裝

npm install vue-image-crop-upload

npm install –save-dev babel-polyfill

示列

 1 <template>
 2   <div id="app">
 3     <button class="btn" @click="toggleShow">設置頭像</button>
 4     <my-upload  5     @crop-success="cropSuccess" 
 6  @crop-upload-success="cropUploadSuccess"
 7  @crop-upload-fail="cropUploadFail"
 8  v-model="show" 
 9  :width="200" 
10  :height="200" 
11  img-format="png" 
12  :size="size"
13  langType='zh' 14     :noRotate='false' 15     field="Avatar1"
16  url="https://httpbin.org/post"></my-upload>
17     <img :src="imgDataUrl">
18   </div>
19 </template>

<script> import 'babel-polyfill'; // es6 shim
  import myUpload from 'vue-image-crop-upload'; export default { data() { return { imgDataUrl: "", show: false, size:2.1 } }, components: { "my-upload": myUpload }, methods: { toggleShow() { this.show = !this.show; }, cropSuccess(imgDataUrl, field) { console.log('-------- crop success --------',imgDataUrl, field); }, //上傳成功回調
 cropUploadSuccess(jsonData, field){ console.log('-------- upload success --------'); this.imgDataUrl = jsonData.files.Avatar1; 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 )

 

 

 

 

 

 

 

 

 

 

 

注意 : 該組件適用於pc端，不推薦手機端使用

Demo

來源:https://www.npmjs.com/package/vue-image-crop-upload