继上篇文章发布不到一天,有一定的反响,于是准备提笔写下h5的头像裁剪,也是前段时间产品的一个小功能,h5相对于pc的头像裁剪简单很多,不需要去转换一些文件格式,好了,准备开始吧!
使用uniapp自带的上传组件
<view class="header_img mt-32">
<uni-file-picker class="img" limit="1" v-model="avatarList" fileMediatype="image" mode="grid"
@select="upload" />
</view>
将插件安装到项目中,这个下载插件的官方地址https://ext.dcloud.net.cn/plugin?id=6878
我记得应该是需要手机扫码看30秒的广告才可以下载的哈哈哈
参数根据自己的需求可以自己设置,头像裁剪记得用fixed,这个是固定尺寸
下载完了之后就将代码加进项目中
<!-- 图片裁剪 -->
<ksp-cropper mode="fixed" :width="250" :height="250" :maxWidth="1024" :maxHeight="1024" :url="cropperUrl"
@cancel="oncancel" @ok="onok"></ksp-cropper>
数据层,标签里面的 :url如果为空插件就默认不显示,有地址裁剪就会自己出来
const cropperUrl = ref('')
现在开始处理逻辑
当我们使用uniapp自带的上传图片时将cropperUrl进行赋值,头像裁剪就会出来
赋值完成后操作后点击确认onok进行裁剪,将cropperUrl置空,去调用上传的接口得到完整的地址,成功得到完整地址后再去调用修改图片(头像)地址即可。
// 选择图片
const upload = (e) => {
const tempFilePaths = e.tempFilePaths; //e是获取的图片源
cropperUrl.value = tempFilePaths[0]
}
// 确认裁剪
const onok = (res) => {
cropperUrl.value = ""
uni.uploadFile({
url: `/apis/set/upload`,
filePath: res.base64,
//设置请求头
header: {
"token": getToken()
},
name: 'file',
success: res2 => {
let data = JSON.parse(res2.data)
if (data.code == 1) {
// url为上传的地址
saveAvatar({
avatar: data.data.fullurl
}).then(res3 => {
if (res3.code == 1) {
successMessage()
} else {
uni.showToast({
title: res3.msg,
icon: 'none'
})
}
})
}
}
})
};
// 取消裁剪
const oncancel = (res) => {
cropperUrl.value = "";
};
以上就是完整的处理逻辑以及代码
完结,撒花,有任何问题请私信踢我或者评论区留言!!!!!!!!!