微信小程序中 在用户信息中关于用户头像更换(拍照或相册上传)功能实现。

图像点击触发事件:

<image src='{{personImage}}' bindtap='changeAvatar' ></image>
Page({
 data:{},
 changeAvatar:function(){
const _this = this;
wx.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success(res) {
// tempFilePath可以作为img标签的src属性显示图片
const tempFilePath = res.tempFilePaths[0];
_this.setData({
personImage: tempFilePath
})
wx.uploadFile({
url: config.UPLOADFILE, //图片上传至开发服务器接口
filePath: tempFilePath,
name: 'file',
formData: {},
success(res) {
const data = res.data;
console.log(data);
}
})
}
})
}
})

个人信息——头像更换(拍照或相册上传)~ 微信小程序的更多相关文章

  1. 02月刊(上) | 微信小程序

    * { margin: 0; padding: 0 } .con { width: 802px; margin: 0 auto; text-align: center; position: inher ...

  2. 反编译获取线上任何微信小程序源码(转)

    看到人家上线的小程序的效果,纯靠推测,部分效果在绞尽脑汁后能做出大致的实现,但是有些细节,费劲全力都没能做出来.很想一窥源码?查看究竟?看看大厂的前端大神们是如何规避了小程序的各种奇葩的坑?那么赶紧来 ...

  3. 我感觉这个书上的微信小程序登陆写得不好

    基本功能是OK,但是感觉传的数据太多,不安全,需要改写. App({ d: { hostUrl: 'http://www.test.com/index.php', //请填写您自己的小程序主机URL ...

  4. 微信小程序开发技巧总结(二) -- 文件的选取、移动、上传和下载

    微信小程序开发技巧总结(二) -- 文件的选取.移动.上传和下载 1.不同类型文件的选取 1.1 常用的图片 视频 对于大部分开发者来说,需要上传的文件形式主要为图片,微信为此提供了接口. wx.ch ...

  5. 微信小程序开发日记——高仿知乎日报(上)

    本人对知乎日报是情有独钟,看我的博客和github就知道了,写了几个不同技术类型的知乎日报APP 要做微信小程序首先要对html,css,js有一定的基础,还有对微信小程序的API也要非常熟悉 我将该 ...

  6. [微信小程序] 微信小程序获取用户定位信息并加载对应城市信息,wx.getLocation,腾讯地图小程序api,微信小程序经纬度逆解析地理信息

    因为需要在小程序加个定位并加载对应城市信息 然而小程序自带api目前只能获取经纬度不能逆解析,虽然自己解析方式,但是同时也要调用地图,难道用户每次进小程序还要强行打开地图选择地址才定位吗?多麻烦也不利 ...

  7. 微信小程序语音(A)发给别人(B),也能播放,是需要先把语音上传到自己的服务器上才可以

    小程序语音(A)发给别人(B),也能播放,是需要先把语音上传到自己的服务器上才可以. https://developers.weixin.qq.com/miniprogram/dev/api/medi ...

  8. 【微信小程序】---线上环境搭建

    一.前言 通常我们在本地电脑上开发微信小程序,调用和访问小程序会有很多问题.特别是在配有自己后端的情况下,我们通过真机访问我们的小程序会出现不可访问的问题 二.线上环境搭建 在这里我们主要以腾讯云给大 ...

  9. [转]微信小程序开发之从相册获取图片 使用相机拍照 本地图片上传

    本文转自:http://blog.csdn.net/qq_31383345/article/details/53014610 今天遇到微信小程序的用户头像设置功能,做笔记. 先上gif: 再上代码: ...

随机推荐

  1. .NetCore技术研究-EntityFramework Core 3.0 Preview

    前段时间.Net Core 3.0 发布了,Entity Framework Core 3.0 也发布了Preview版.假期用了一上午大致研究了一遍,同时又体验了一把Visual Studio 20 ...

  2. IP地址 0.0.0.0 是什么意思?

    IP地址0.0.0.0是什么意思? 根据RFC文档描述,它不只是代表本机,0.0.0.0/8可以表示本网络中的所有主机,0.0.0.0/32可以用作本机的源地址,0.0.0.0/8也可表示本网络上的某 ...

  3. mac & ip

    mac 解决本地网络机器的通信 ip 解决不同网络间主机的通信

  4. python selenium 百度登录

    from selenium import webdriver import time driver = webdriver.Chrome() driver.get("https://www. ...

  5. 用 webpack 创建 vue 项目

    1.安装支持webpack 包 npm i -D  webpack webpack-cli  aspnet-webpack webpack-dev-middleware  webpack-hot-mi ...

  6. Oarcle之单行函数(上)

    dual 是一个虚表,为了满足sql句式而设置这么一个表   单行函数 字符函数 concat 拼接两个字符串 select concat (concat(ename,‘的职位是’),job) fro ...

  7. Python批量合并处理B站视频

    最近想学习后端,又不想花钱,怎么办呢?于是在手机端B站(哔哩哔哩)上面找到了满意的免费视频教程,但是手机端看起来很不方便啊.于是,我通过在手机端缓存下来后,导入到了电脑端,但是我后面了发现两个问题: ...

  8. Centos 7 磁盘阵列配置介绍(RAID)

    转自:https://blog.51cto.com/gaowenlong/2086918 Centos 7 磁盘阵列配置介绍每当我们提到磁盘阵列,相信广大管理员并不陌生,比如我们一般安装服务器系统的时 ...

  9. ElasticSearch(八)Elasticsearch-head 连接不上Elasticsearch的原因和解决方案

    在上篇博文里ElasticSearch(七) Elasticsearch在Centos下搭建可视化服务中已经访问到了可视化界面.然后兴奋地进行了数据提交测试,提交啊,刷新啊,就是看不到数据变化,仔细一 ...

  10. iOS imageNamed 与 imageWithContentsOfFile 的区别

    imageNamed 方法 1)后面的参数是icon的名字,图片可以存在项目中,也可以存在Asset中 2)该方法只适合一些中小型的图片读取,而一些比较大的资源图片并不适合用这个方法 3)这个方法加载 ...