uni-app修改头像并上传头像资源到服务器

前端小白的uni-app艰难学习之路

功能

要实现从本地相册或拍照获取图片，然后传给后台，后台返回保存后的图片地址

实现

这里首先我们要了解，通过uni-app提供的chooseImage接口返回的是图片的临时路径，除了你自己的项目里，其他任何地方都没办法查看图片的，这显然是不行的，我的解决办法是通过chooseImage接口获取临时路径，然后用了插件把图片转成base64格式，然后传给后台，后台再把base64格式的图片转成路径并保存
这是用到的插件地址：https://ext.dcloud.net.cn/plugin?id=123
在用插件之前，也曾试过别的办法，最后发现插件是最好用的
先看代码：

getPhoto: function () {let id = uni.getStorageSync('user').iduni.chooseImage({count: 1,sourceType: ['album'],success:(res) => {pathToBase64(res.tempFilePaths[0]).then(base64 => {// console.log(base64)uni.request({url: urls.HTTP + '/user/uploadheadimg',method: 'POST',name: 'file',data: {uid: id,image: base64},success: (res) => {console.log('上传头像', res)if (res.data.code === 0) {this.$store.dispatch('userInfo', res.data.user)uni.setStorageSync('user', res.data.user)} else {uni.showToast({title: res.data.error,icon: 'none'})}}})})}})},

很简单的功能，希望对大家有帮助

uni-app修改头像并上传头像资源到服务器相关推荐

android修改头像以及上传头像
实际开发中的功能,本地选择图片或者拍照,然后裁剪作为头像,这里做一下总结. 直接看demo效果图: 源码地址:https://download.csdn.net/downloa ...
完美实现类似QQ的自拍头像、上传头像功能！（Demo 源码）
现在很多下载客户端程序都需要设定自己头像的功能,而设定头像一般有两种方式:使用摄像头自拍头像,或者选择一个图片的某部分区域作为自己的头像. 一.相关技术若要实现上述的自拍头像和上传头像的功能,会碰到 ...
个人中心html更换头像,html 上传头像前预览以及点击头像去选择和更换头像
一般情况我们在html上传图片时都是通过input[file]选择图片,但是选择后并不能预览.今天碰到这样一个需求,先看图: 需求是: 1.选择图片不是点击input[file],而是点击用户图片 2 ...
上传头像mysql_上传头像 - MVC5+EF6+MySql企业网盘实战 - 爱整理
写在前面最近又开始忙了,工期紧比较赶,另外明天又要去驾校,只能一个功能一个功能的添加了,也许每次完成的功能确实不算什么,等将功能都实现了,然后在找一个好点的ui对前端重构一下. 示例这里采用最简单 ...
SpringBoot-项目1-用户（注册，登录，修改密码，修改个人资料，上传头像）
1. 项目分析在设计一款软件时,在编写代码之前,应该先分析这个项目中需要处理哪些类型的数据!例如,本项目中需要处理的数据种类有:收藏,购物车,用户,收货地址,订单,商品,商品类别. 当确定了需要处理 ...
完整的前后端实现上传头像、压缩头像
本文是我在写上传头像功能后的一个详细的总结,用作以后可以回顾,可能较为繁琐,如果明白上传只想看压缩,可直接拉到文章后半部分. 文章目录上传头像上传头像准备工作上传头像上传头像路由配置上传头像 ...
前后端分离学习笔记(5) ---[表单的增删改操作；以及为管理员上传头像]
上一篇案例中也是查询到了表单的内容–>前后端分离学习笔记(4) -[路由嵌套, 查询表单显示] 文章目录 1.前端组件页面添加管理员操作修改管理员信息删除管理员为管理员上传头像修改密码 ...
HTML5新特性 day_05(8.11)上传头像、webSocket
文件上传经典业务流程 – 上传头像在注册业务,填写表单的过程中,需要选择头像,上传头像,填写基本信息(用户名.密码等)后,点击注册按钮,完成用户注册.当下次登录时需要看到以前提交的头像图片. 提供注 ...
vue 移动端头像裁剪_移动端上传头像并裁剪功能(h5)
移动端头像图片上传裁剪 .button { outline: 0; display: inline-block; margin-bottom: 0; font-weight: 400; text-al ...

uni-app修改头像并上传头像资源到服务器

功能

实现

uni-app修改头像并上传头像资源到服务器相关推荐

最新文章

热门文章