- 基于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，上面讲到过，这里就不赘述了