当前位置:网站首页>Wechat applet avatarcropper avatar clipping
Wechat applet avatarcropper avatar clipping
2022-07-26 09:27:00 【44w0】
Recently, I'm developing wechat applet , In order to avoid uploading too large user avatars , Lead to waste of resources , Added the function of head image clipping
Use u-View In the component library AvatarCropper Head cut
The official website has made it very clear , The following is the official website address :
https://www.uviewui.com/components/avatarCropper.html
I directly use the code on the official website , I found some problems :
this.$u.route Jump invalid , I'll switch to uniapp Of uni.navigateTo, change to the use of sth. uni.navigateTo You need to pay attention to , The original parameter writing method is not good ,uni.navigateTo The parameters of are spliced behind the path , Use... Between multiple parameters && separate .
methods{
chooseAvatar() {
uni.navigateTo({
// About this path , See below " matters needing attention "
url: '../../u-avatar-cropper/u-avatar-cropper?rectWidth='+200+'&&destWidth='+200+'&&fileType='+'jpg',
})
},
}
created() {
// Listen for events posted from the clipping page , Get clipping results
uni.$on('uAvatarCropper', path => {
let token = uni.getStorageSync("token");
this.avatar = path;
// You can upload it to the server here
uni.uploadFile({
url: baseUrl + '/users/updateAvatar', // Image upload address
filePath: path,
name: 'avatar',
header: {
Authorization: token
},
complete: (res) => {
console.log(res);
}
});
})
},
边栏推荐
猜你喜欢
随机推荐
Tornado multi process service
【Mysql】一条SQL语句是怎么执行的(二)
Bloom filter
2B and 2C
Redis principle and use - Basic Features
暑假末尾学习笔记
解决“NOTE: One or more layouts are missing the layout_width or layout_height attributes.”
OnTap 9 file system limitations
sublime 安装插件
opencv图像处理
nodejs服务后台执行(forever)
2022 Shanghai safety officer C certificate examination questions and mock examination
The problem of the sum of leetcode three numbers
756. Serpentine matrix
OFDM Lecture 16 - OFDM
STM32+MFRC522完成IC卡号读取、密码修改、数据读写
Process32First返回false,错误x信息24
字节缓冲流&字符流详解
Windows通过命令备份数据库到本地
自定义密码输入框,无圆角