首页 > 其他分享 >uniapp 头像裁剪

uniapp 头像裁剪

时间:2023-06-19 15:55:35浏览次数:33  
标签:uniapp res 裁剪 头像 token uni 图片

uniapp 上传主要就是用到了俩个方法 uni.chooseImage()uni.uploadFile()。照抄就行

 

//view部分

<view class="img-boxs">
            <image :src="from.avatar" @click="handleUpImg"> </image>
            <cover-view>修改头像</cover-view>
        </view>

 

data 部分

from : {
                    avatar :'https://cdn.uviewui.com/uview/common/logo.png',
                },

 

方法部分

handleUpImg() {// 点击图片区域,选择图片并上传
                uni.chooseImage({// 选择图片
                    count: 1,
                    success: (res) => {// 图片选择成功的回调(必传),会返回一个对象
                        this.from.avatar = res.tempFilePaths[0] // 用于更新视图
                        uni.uploadFile({
                            url: " 服务器IP + 端口 + 接口 ", // 请求地址
                            filePath: res.tempFilePaths[0], // 临时文件路径
                            name: "avatarfile", // 文件对应的key值
                            header: {
                                token: 自行获取 // 需要带的请求头,token等等
                            },
                            // formData: {// 额外的请求数据
                            //     uesrName: this.userInfo.userName
                            // },
                            success: (res) => {// 成功后的回调
                                console.log("修改成功");
                            }
                        })
                    }
                })
            }

 

标签:uniapp,res,裁剪,头像,token,uni,图片
From: https://www.cnblogs.com/majiayin/p/17491335.html

相关文章

  • uniapp 中使用 navigator 跳转页面失败的问题
    uni.navigateTo用于页面跳转如:<navigatorurl="/pages/index/index"hover-class="navigator-hover"><buttontype="default">跳转</button></navigator>但是跳转页面失败,没有任何反应问题原因:url指定的页面,在pages.json中配置的是TabBar......
  • uniapp封装接口
    1.创建一个config文件夹,在里面创建app.jslethttpApi=''//接口公共部分module.exports={//要传的请求头token等HTTP_REQUEST_URL:httpApi,HEADER:{Headers,Authorization:'token','i-branch':'zh'},//......
  • 2023-06-19 uniapp云打包报错:app-plus.distribute.icons.android.hdpi 文件不存在
    详细报错:[HBuilder]11:02:51.408Manifest.json文件以下节点配置错误,请检查修复[HBuilder]11:02:51.408app-plus.distribute.icons.android.hdpi 文件不存在[HBuilder]11:02:51.408app-plus.distribute.icons.android.xxhdpi 文件不存在[HBuilder]11:02:51.408ap......
  • 工作提效--python实现批量音频裁剪工具
    一、问题:大批量的音频测试文件,无法满足测试需求项目测试需要往平台中上传一批音频文件进行算法测试,平台规定的音频的时长必须在10-30s内,而从算法开发人员那里获取到的3000条音频文件都是32s时长,因此无法将测试数据上传到平台进行测试。基于以上问题,需要在项目体测之前将3000......
  • uniapp怎么关闭侧滑
    uniapp全局禁止侧滑首先找到并打开“manifest.json”,然后配置内容为“"popGesture":"none"”即可禁止响应左滑动画。"plus":{//uni-app项目对应节点名称为"app-plus""popGesture":"none"}uniapp单页面禁止侧滑返回(NVUE)//#ifdefAPP-PLUSletpa......
  • 基于uniapp+vite4+vue3搭建跨端项目|uni-app+uview-plus模板
    最近得空学习了下uniapp结合vue3搭建跨端项目。之前也有使用uniapp开发过几款聊天/仿抖音/后台管理等项目,但都是基于vue2开发。随着vite.js破局出圈,越来越多的项目偏向于vue3开发,就想着uniapp搭配vite4.x构建项目效果会如何?经过一番尝试果然真香~版本信息HBuilderX:3.8.4Vite......
  • uniapp 页面跳转传值(eventChannel)
    在A->B页面时,如果想要将A页面中的数据传给B,可以使用eventChannel方法或者用url拼接,在这里先说明第一种eventChannel方法如何实现。A页面:首先定义了一个点击事件handleItemClick,触发点击事件后再传递数据data(){return{itemData:'123'}}methods:{h......
  • uniapp 打包发布小程序的流程指引
    用uniapp开发小程序其实和开发H5是一样的。就是在打包的时候会略有不同。uniapp在开发的时候需要在 manifest.json的源码视图配置nginx反向代理才能去请求后端`/代理名称${config.url}`一般情况下的请求都是代理+url去请求数据。但是,这个只是针对H5的请求方式......
  • uniapp上拉加载下拉刷新
    <template> <viewclass="content"> <scroll-viewscroll-with-animationrefresher-default-style="none":refresher-enabled="true" :refresher-triggered="triggered"refresher-background="#fff&quo......
  • uniapp-黑马优选学习02
    01.scroll-view配置高度或宽度时的屏幕铺满;使用 uni.getSystemInfoSync()获取设备相关信息02.取分类数据>API接口:/api/public/v1/categories>数据结构:{内容太多,请直接调用接口获取}>>为元素配置动态类信息(如果条件匹配则添加active类,否则不......