PC端上傳頭像及裁剪功能
- 基於vue框架
- 藉助elementUI框架做為上傳元件
- 藉助vue-cropper做為裁剪工具
話不多說,先看效果:
上傳頭像元件:
<div class="app-head"> <h3>小程式頭像</h3> <div class="right"> <el-upload class="avatar-uploader" action="http://up.qiniu.com/" :data="{'token':token}" :show-file-list="false" :on-success="successBizLicense" :before-upload="beforeBizLicense" > <img v-if="imageUrl" :src="imageUrl" class="avatar"> <i v-else class="el-icon-plus avatar-uploader-icon"></i> </el-upload> <span class="right-r">圖片格式只支援:BMP、JPEG、JPG、GIF、PNG,大小不超過2M</span> </div> </div>
- action:必選引數,上傳的地址(型別:string)
- 這裡藉助七牛雲上傳資源,即:http://up.qiniu.com/
- data:上傳時附帶的額外引數(型別:object)
- 這裡是上傳到七牛所必須的upToken,即程式碼中的{'token':token},注意必須是物件形式
- 該upToken獲取方式:(以下是七牛雲文件獲取upToken寫法)
uptoken : '<Your upload token>', // uptoken是上傳憑證,由其他程式生成 uptoken_url: '/uptoken', // Ajax請求uptoken的Url,強烈建議設定(服務端提供) uptoken_func: function(){ // 在需要獲取uptoken時,該方法會被呼叫 // do something return uptoken; },
- 這裡獲取upToken方法,直接通過請求後臺介面,給大家簡單看下:
// 獲取上傳圖片的upToken
getToken() {
const that = this
that.$store.dispatch('imageToken').then(res => {
that.token = res.token
})
}
// imageToken即請求後臺介面獲取upToken的方法,這裡就不展示了
- show-file-list:是否顯示已上傳檔案列表(預設:true)
- 這裡是單張圖片,所以設定為false
- on-success:檔案上傳成功時的鉤子(型別:function(response, file, fileList))
- 給大家看看本文的寫法:
// 頭像
successBizLicense(res, file) {
const that = this
that.option.img = showUrl + '/' + file.response.key
that.cropperFlag = true
}
- 把上傳七牛雲的圖片url給到裁剪元件
- showUrl在這裡為專案部署的域名字首,接上key即為圖片儲存在七牛雲上的地址
- cropperFlag控制裁剪元件顯示隱藏
-
before-upload:上傳檔案之前的鉤子,引數為上傳的檔案,若返回 false 或者返回 Promise 且被 reject,則停止上傳。(型別:function(file))
- 這裡用這個鉤子來控制圖片大小過大的情況:
// 上傳頭像之前
beforeBizLicense(file) {
const isLt2M = file.size / 1024 / 1024 < 2
if (!isLt2M) {
return false
this.$message.error('上傳頭像圖片大小不能超過 2MB!')
}
return isLt2M
}
裁剪元件得到Url後,接著介紹裁剪元件相關屬性:
裁剪工具的option物件內容:
option: {
img: '', // 裁剪圖片的地址
info: true, // 裁剪框的大小資訊
outputSize: 1, // 裁剪生成圖片的質量
outputType: 'jpeg', // 裁剪生成圖片的格式
canScale: true, // 圖片是否允許滾輪縮放
autoCrop: true, // 是否預設生成截圖框
autoCropWidth: 144, // 預設生成截圖框寬度
autoCropHeight: 144, // 預設生成截圖框高度
fixedBox: true
},
- img:需裁剪的圖片地址即通過上傳頭像元件得到的url
- info:裁剪框大小,這裡是500px*500px
- outputSize: 裁剪生成圖片質量0.1-1
- outputType:裁剪生成圖片格式
- canScale:圖片是否允許縮放
- autoCrop:是否預設生成裁剪框
- autoCropWidth和autoCropHeight:截圖大小,這裡固定為144px*144px
- fixedBox:固定截圖框大小 不允許改變
裁剪元件:
<div class="cropper" v-if="cropperFlag">
<vueCropper
class="content"
ref="cropper"
:img="option.img"
:outputSize="option.outputSize"
:outputType="option.outputType"
:info="option.info"
:canScale="option.canScale"
:autoCrop="option.autoCrop"
:autoCropWidth="option.autoCropWidth"
:autoCropHeight="option.autoCropHeight"
:fixedBox="option.fixedBox"
>
</vueCropper>
<button class="cropper-btn" @click="onCubeImg">截圖並上傳</button>
<img class="delete-icon" src="http://common.static.sangeayi.cn/shop_wx/images/[email protected]" @click="hideCropper"/>
</div>
- onCubeImg:此方法 做了什麼,大家看下面:
// 確定裁剪圖片
onCubeImg() {
// 獲取cropper的截圖的base64 資料
const that = this
that.$refs.cropper.getCropData(data => {
const file = data.split(',')[1]
that.putb64(file)
})
}
- that.$refs.cropper.getCropData(res => {}) :獲取截圖的base64資料
- data.split(',')[1] :記得把base64資料逗號前的資料擷取掉,逗號後的資料是我們需要的
- that.putb64(file) :此方法是為了將base64上傳到七牛雲得到我們截圖後的key
- putb64方法具體內容如下:
// base64上傳到七牛
putb64(base64) {
const that = this
const pic = base64
const url = 'http://upload.qiniup.com/putb64/-1' // 非華東空間需要根據注意事項 1 修改上傳域名
const xhr = new XMLHttpRequest()
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
const obj = JSON.parse(xhr.responseText)
that.imageUrl = showUrl + '/' + obj.key
console.log(that.imageUrl)
that.cropperFlag = false
}
}
xhr.open('POST', url, true)
xhr.setRequestHeader('Content-Type', 'application/octet-stream')
xhr.setRequestHeader('Authorization', 'UpToken ' + that.token)
xhr.send(pic)
},
- url:base64上傳需要的url
- JSON.parse(xhr.responseText): 記得將物件字串轉成json物件
- that.imageUrl:即我們需要上傳的小程式真正的頭像
- that.token:即upToken,上面講到過,這裡就不贅述了