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，上面講到過，這裡就不贅述了