网站推广方案计划书,企业查询信息,中铁三局招聘事件,网站开发怎么做账效果图#xff1a; 1、ksp-cropper是hbuilder插件市场中的一款插件#xff0c;兼容vue2和vue3
ksp-cropper插件安装地址#xff0c;直接点击跳转
2、插件用法相对简单 #xff08;1#xff09;只要url有值就会显示插件#xff0c;为空就会隐藏插件 #xff08;2#…效果图 1、ksp-cropper是hbuilder插件市场中的一款插件兼容vue2和vue3
ksp-cropper插件安装地址直接点击跳转
2、插件用法相对简单 1只要url有值就会显示插件为空就会隐藏插件 2点击确认按钮事件和点击取消按钮事件中拿到临时路径和清空临时路径 3、调试过程中遇到的两个小问题 1打开插件的时候没有占满整个页面—ksp-cropper不需要包裹在有类名的标签中单独放就行 2点击确认按钮之后还是触发uni.chooseImage事件-----ksp-cropper不要包裹在有点击事件的标签中单独放就行
4、代码
image stylewidth: 30rpx; height: 25rpx :srcdata.avatarclickselectImage/image
ksp-cropper modefree :width200 :height140 :maxWidth1024 :maxHeight1024 :urldata.urlcancelcancelSelect okupdateAvatarImg/ksp-cropperscript langts setupimport { reactive, getCurrentInstance, computed, ref } from vue;const data reactive({
avatar:,//要显示的头像
url:,//插件的url})//点击头像选择相册里的照片function selectImage() {uni.chooseImage({count: 1,success: (res) {data.url res.tempFilePaths[0];//给插件的url赋值插件就会显示},});}function selectedImage(ev) {//url设置为空隐藏控件data.url return new Promise((resolve, reject) {uni.showLoading({mask: true,title: 上传头像中,});const uploadOptions {url: baseurl common/upload,filePath: ev.path,//插件返的临时路径name: Image,header: {token: uni.getStorageSync(token),},};//调用上传接口将临时路径转换为https开头的图片格式uni.uploadFile({...uploadOptions,success: async (res) {try {const { result } JSON.parse(res.data);await updateAvatar(result); //调用修改接口实现修改头像 uni.hideLoading();resolve();} catch (error) { console.error(上传失败, error);reject(error);}},});});}
