本文转自:http://blog.csdn.net/qq_31383345/article/details/53014610

今天遇到微信小程序的用户头像设置功能,做笔记.

先上gif:

再上代码:

小demo,代码很简单.

1.index.wxml

  1. <!--index.wxml-->
  2. <button style="margin:30rpx;" bindtap="chooseimage">获取图片</button>
  3. <image src="{{tempFilePaths }}" mode="aspecFill" style="width: 100%; height: 450rpx"/>

2.index.js

  1. //index.js
  2. //获取应用实例
  3. var app = getApp()
  4. Page({
  5. data: {
  6. tempFilePaths: ''
  7. },
  8. onLoad: function () {
  9. },
  10. chooseimage: function () {
  11. var _this = this;
  12. wx.chooseImage({
  13. count: 1, // 默认9
  14. sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
  15. sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
  16. success: function (res) {
  17. // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
  18. _this.setData({
  19. tempFilePaths:res.tempFilePaths
  20. })
  21. }
  22. })
  23. }
  24. })

API 说明:


这里说说sourcetype.默认是从相册获取和使用相机拍照,跟微信现在选择图片的界面一样,第一格是拍照,后面的是相册照片.

这里注意:返回的是图片在本地的路径.如果需要将图片上传到服务器,需要用到另一个API.

示例代码:

  1. wx.chooseImage({
  2. success: function(res) {
  3. var tempFilePaths = res.tempFilePaths
  4. wx.uploadFile({
  5. url: 'http://example.weixin.qq.com/upload', //仅为示例,非真实的接口地址
  6. filePath: tempFilePaths[0],
  7. name: 'file',
  8. formData:{
  9. 'user': 'test'
  10. },
  11. success: function(res){
  12. var data = res.data
  13. //do something
  14. }
  15. })
  16. }
  17. })

我的博客:http://blog.csdn.net/qq_31383345

[转]微信小程序开发之从相册获取图片 使用相机拍照 本地图片上传的更多相关文章

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

    1.index.wxml <!--index.wxml--> <button style="margin:30rpx;" bindtap="choose ...

  2. 微信小程序开发——点击按钮获取用户授权没反应或反应很慢的解决方法

    异常描述: 点击按钮获取用户手机号码,有的时候会出现点击无反应或很久之后才弹出用户授权获取手机号码的弹窗,这种情况下,也会出现点击穿透的问题(详见:微信小程序开发——连续快速点击按钮调用小程序api返 ...

  3. 【微信小程序开发】之如何获取免费ssl证书【图文步骤】

    微信小程序要求所有网络请求都走ssl加密,因此我们开发服务端接口需要配置为https 这篇文章介绍一下如何 在 startssl 申请一个免费的ca证书. 1. 打开网站  https://www.s ...

  4. 微信小程序开发之如何哪获取微信小程序的APP ID

    微信小程序的开发工具,在新建项目的时候,默认提示填写APP ID,如果不填写AppID 也是可以本地测试和开发的,但是无法通过手机调试,只能在开发工具里查看 如果需要真机调试微信小程序,需要安装微信6 ...

  5. 微信小程序开发之修改和获取变量的值

    在小程序开发过程中有两种变量,一种是定义在app,js里面的globalData定义的全局变量,另一种是在各个页面app,data里面的定义的变量. 一:全局变量的定义,获取值,赋值,修改 app.j ...

  6. 微信小程序开发(十一)获取手机的完整详细信息

    // succ.wxml <view style='position:absolute; top:30%; left:35%;font-size:36rpx'>{{name}}:签到成功. ...

  7. 微信小程序开发(六)获取手机信息

    // succ.js var app = getApp() Page({ data: { mobileModel: '', // 手机型号 mobileePixelRatio: '', // 手机像素 ...

  8. 微信小程序开发(十)获取手机的经纬度

    // succ.wxml <view>经度:{{lon}}</view> <view>纬度:{{lat}}</view> // succ.js var ...

  9. 微信小程序开发(九)获取手机连接的wifi信息

    // succ.wxml <view>WIFI ssid:{{wifissid}}</view> <view>WIFI bssid:{{wifiBssid}}< ...

随机推荐

  1. 使用sn.exe为程序集签名

    前言 在写上一篇随笔时,为理解EF事务底层的原理,我去Github上把EF的源码下载放到自己项目调试,不过在编译时遇到了下面这个报错信息.经过一番查阅,了解到了程序集签名(也称强名称签名)的概念.报错 ...

  2. ASPNETPager常用属性(近来用到分页属性)

    ASPNETPager常用属性 建议去封装好,然后调用这样比较容易 <webdiyer:aspnetpager id="AspNetPager1" runat="s ...

  3. web思维导图(前期)

  4. 【ocp-12c】最新Oracle OCP-071考试题库(42题)

    42.(9-1)choose the best answer: Which statement is true about the Oracle SQL, DELETE and TRUNCATE st ...

  5. JavaScript多个h5播放器video,点击一个播放其他暂停

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 位集合(BitSet)| Java数据结构

    Java Bitset类 BitSet使用示例: import java.util.BitSet; public class BitSetDemo { public static void main( ...

  7. Python 开发安卓Android及IOS应用库Kivy安装尝试

    Python 开发安卓Android及IOS应用库Kivy安装尝试: 先来看看这货可以用来制作什么应用: Create a package for Windows Create a package f ...

  8. [CISCO] 交换机间链路聚合端口聚合

    [CISCO] 交换机间链路聚合端口聚合 一.Introduction 端口通道( port channel ) 是一种聚合多个物理接口 ( that ) 创建一个逻辑接口.你可以捆扎( bundle ...

  9. Dubbo 自定义异常,你是怎么处理的?

    前言 记录Dubbo对于自定义异常的处理方式. 实现目标 服务层异常,直接向上层抛出,web层统一捕获处理 如果是系统自定义异常,则返回{"code":xxx,"msg& ...

  10. 分析解决Java运行时异常

            1 ,基础知识    http://my.oschina.net/u/140462/blog/421128    JVM运行时内存结构          2 ,相关命令    http ...