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


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读取中文cookie时的乱码问题的解决方法
Oct 14 Javascript
gridpanel动态加载数据的实例代码
Jul 18 Javascript
js 3秒后跳转页面的实现代码
Mar 10 Javascript
提取jquery的ready()方法单独使用示例
Mar 25 Javascript
jquery实现简易的移动端验证表单
Nov 08 Javascript
微信小程序 slot踩坑的解决
Apr 01 Javascript
js实现全选反选不选功能代码详解
Apr 24 Javascript
解决vue初始化项目时,一直卡在Project description上的问题
Oct 31 Javascript
微信小程序服务器日期格式化问题
Jan 07 Javascript
基于vue-draggable 实现三级拖动排序效果
Jan 10 Javascript
js实现图片上传到服务器和回显
Jan 19 Javascript
解决vue安装less报错Failed to compile with 1 errors的问题
Oct 22 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
Netflix将与CLAMP、乙一以及冲方丁等6名知名制作人合伙展开原创动画计划!
2020/03/06 日漫
提升PHP执行速度全攻略(下)
2006/10/09 PHP
漂亮但不安全的CTB
2006/10/09 PHP
PHP对文件进行加锁、解锁实例
2015/01/23 PHP
详解在PHP的Yii框架中使用行为Behaviors的方法
2016/03/18 PHP
thinkphp5框架实现的自定义扩展类操作示例
2019/05/16 PHP
传递参数的标准方法(jQuery.ajax)
2008/11/19 Javascript
Extjs TriggerField在弹出窗口显示不出问题的解决方法
2010/01/08 Javascript
返回对象在当前级别中是第几个元素的实现代码
2011/01/20 Javascript
AngularJs  unit-testing(单元测试)详解
2016/09/02 Javascript
jQuery ajax的功能实现方法详解
2017/01/06 Javascript
基于jQuery实现弹幕APP
2017/02/10 Javascript
Javascript下拉刷新的简单实现
2017/02/14 Javascript
Angular.js中angular-ui-router的简单实践
2017/07/18 Javascript
Nuxt.js开启SSR渲染的教程详解
2018/11/30 Javascript
解决VantUI popup 弹窗不弹出或无蒙层的问题
2020/11/03 Javascript
[01:45]2014DOTA2 TI预选赛预选赛 战前探营!
2014/05/21 DOTA
[01:08:57]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第二场
2014/05/24 DOTA
[01:07:15]DOTA2-DPC中国联赛 正赛 DLG vs XG BO3 第二场 1月25日
2021/03/11 DOTA
python常规方法实现数组的全排列
2015/03/17 Python
python threading模块操作多线程介绍
2015/04/08 Python
python读取二进制mnist实例详解
2017/05/31 Python
解决Pycharm调用Turtle时 窗口一闪而过的问题
2019/02/16 Python
python实现图书借阅系统
2019/02/20 Python
Python函数式编程实例详解
2020/01/17 Python
Python爬虫逆向分析某云音乐加密参数的实例分析
2020/12/04 Python
H5 canvas中width、height和style的宽高区别详解
2018/11/02 HTML / CSS
详解移动端Html5页面中1px边框的几种解决方法
2018/07/24 HTML / CSS
详解淘宝H5 sign加密算法
2020/08/25 HTML / CSS
莫斯科绝对前卫最秘密的商店:SVMoscow
2017/10/23 全球购物
英国领先的男装设计师服装购物网站:Mainline Menswear
2018/02/04 全球购物
自我鉴定范文200字
2013/10/02 职场文书
购房意向书
2014/04/01 职场文书
《歌唱二小放牛郎》教学反思
2014/04/19 职场文书
《我和小伙伴》教学反思
2016/02/20 职场文书
Oracle11g r2 卸载干净重装的详细教程(亲测有效已重装过)
2021/06/04 Oracle