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


Posted in Javascript onApril 18, 2017

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

先上gif:

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

再上代码:

小demo,代码很简单.

1.index.wxml

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

2.index.js

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

API 说明:

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

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

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

示例代码:

wx.chooseImage({ 
 success: function(res) { 
  var tempFilePaths = res.tempFilePaths 
  wx.uploadFile({ 
   url: 'http://example.weixin.qq.com/upload', //仅为示例,非真实的接口地址 
   filePath: tempFilePaths[0], 
   name: 'file', 
   formData:{ 
    'user': 'test' 
   }, 
   success: function(res){ 
    var data = res.data 
    //do something 
   } 
  }) 
 } 
})

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
Javascript中找到子元素在父元素内相对位置的代码
Jul 21 Javascript
javascript事件函数中获得事件源的两种不错方法
Mar 17 Javascript
js生成缩略图后上传并利用canvas重绘
May 15 Javascript
基于JQuery实现图片轮播效果(焦点图)
Feb 02 Javascript
JavaScript中将数组进行合并的基本方法讲解
Mar 07 Javascript
JS出现失效的情况总结
Jan 20 Javascript
js中获取键盘按下键值event.keyCode、event.charCode和event.which的兼容性详解
Mar 15 Javascript
JS实现的模仿QQ头像资料卡显示与隐藏效果
Apr 07 Javascript
微信小程序仿微信运动步数排行(交互)
Jul 13 Javascript
使用RN Animated做一个“添加购物车”动画的方法
Sep 12 Javascript
JS实现集合的交集、补集、差集、去重运算示例【ES5与ES6写法】
Feb 18 Javascript
node学习笔记之读写文件与开启第一个web服务器操作示例
May 29 Javascript
微信小程序实战之自定义抽屉菜单(7)
Apr 18 #Javascript
微信小程序--onShareAppMessage分享参数用处(页面分享)
Apr 18 #Javascript
微信小程序实战之自定义toast(6)
Apr 18 #Javascript
Jquery-data的三种用法
Apr 18 #jQuery
微信小程序实战之登录页面制作(5)
Mar 30 #Javascript
Angular2数据绑定详解
Apr 18 #Javascript
微信小程序教程系列之设置标题栏和导航栏(7)
Jun 29 #Javascript
You might like
PHP has encountered an Access Violation at 7C94BD02解决方法
2009/08/24 PHP
PHP操作MySQL事务实例
2014/11/05 PHP
ThinkPHP模板输出display用法分析
2014/11/26 PHP
基于JQuery+PHP编写砸金蛋中奖程序
2015/09/08 PHP
记录Yii2框架开发微信公众号遇到的问题及解决方法
2018/07/20 PHP
PHP中quotemeta()函数的用法讲解
2019/04/04 PHP
laravel框架中表单请求类型和CSRF防护实例分析
2019/11/23 PHP
php-7.3.6 编译安装过程
2020/02/11 PHP
HTML DOM的nodeType值介绍
2011/03/31 Javascript
javascript将url中的参数加密解密代码
2014/11/17 Javascript
深入分析原生JavaScript事件
2014/12/29 Javascript
javascript实现模拟时钟的方法
2015/05/13 Javascript
原生js实现自由拖拽弹窗代码demo
2016/06/29 Javascript
javascript添加前置0(补零)的几种方法
2017/01/05 Javascript
浅谈vue加载优化策略
2019/03/19 Javascript
浅谈JS和jQuery的区别
2019/03/27 jQuery
JS如何在不同平台实现多语言方式
2020/07/16 Javascript
vue项目里面引用svg文件并给svg里面的元素赋值
2020/08/17 Javascript
探索浏览器页面关闭window.close()的使用详解
2020/08/21 Javascript
初学python数组的处理代码
2011/01/04 Python
Python中的生成器和yield详细介绍
2015/01/09 Python
pymongo实现多结果进行多列排序的方法
2015/05/16 Python
python3.6使用urllib完成下载的实例
2018/12/19 Python
Python3利用print输出带颜色的彩色字体示例代码
2019/04/08 Python
python3+PyQt5 使用三种不同的简便项窗口部件显示数据的方法
2019/06/17 Python
在linux下实现 python 监控usb设备信号
2019/07/03 Python
pywinauto自动化操作记事本
2019/08/26 Python
交通事故委托书范本
2014/09/28 职场文书
监考失职检讨书
2015/01/26 职场文书
物业保安辞职信
2015/05/12 职场文书
初中数学课堂教学反思
2016/02/17 职场文书
《实心球》教学反思
2016/02/23 职场文书
关于战胜挫折的名言警句大全!
2019/07/05 职场文书
java中用float时,数字后面加f,这样是为什么你知道吗
2021/09/04 Java/Android
Redis的字符串是如何实现的
2021/10/24 Redis
python语言中pandas字符串分割str.split()函数
2022/08/05 Python