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


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 相关文章推荐
href下载文件根据id取url并下载
May 28 Javascript
jQuery实现的在线答题功能
Apr 12 Javascript
jQuery实现仿Google首页拖动效果的方法
May 04 Javascript
深入理解Ajax的get和post请求
Jun 02 Javascript
基于LayUI实现前端分页功能的方法
Jul 22 Javascript
JavaScript判断浏览器和hack滚动条的写法
Jul 23 Javascript
gulp教程_从入门到项目中快速上手使用方法
Sep 14 Javascript
Vue添加请求拦截器及vue-resource 拦截器使用
Nov 23 Javascript
浅析JavaScript中的特殊数据类型
Dec 15 Javascript
Vue实现表格批量审核功能实例代码
May 28 Javascript
JavaScript跳出循环的三种方法(break, return, continue)
Jul 30 Javascript
JS制作简易计算器的实例代码
Jul 04 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中如何在有限的内存中读取大文件
2013/07/02 PHP
利用PHP如何写APP接口详解
2016/08/23 PHP
PHP获取路径和目录的方法总结【必看篇】
2017/03/04 PHP
mysqli扩展无法在PHP7下升级问题的解决
2019/09/10 PHP
基于JQuery的访问WebService的代码(可访问Java[Xfire])
2010/11/19 Javascript
JSON为什么那样红为什么要用json(另有洞天)
2012/12/26 Javascript
js替代copy(示例代码)
2013/11/27 Javascript
js输入框邮箱自动提示功能代码实现
2013/12/10 Javascript
Visual Studio中js调试的方法图解
2014/06/30 Javascript
理解jQuery stop()方法
2014/11/21 Javascript
javascript删除一个html元素节点的方法
2014/12/20 Javascript
简介JavaScript中POSITIVE_INFINITY值的使用
2015/06/05 Javascript
怎么限制input的text里输入的值只能是数字(正则、js)
2016/05/16 Javascript
jQuery模仿单选按钮选中效果
2016/06/24 Javascript
浅谈 vue 中的 watcher
2017/12/04 Javascript
Vue.js 的移动端组件库mint-ui实现无限滚动加载更多的方法
2017/12/23 Javascript
微信小程序动画组件使用解析,类似vue,且更强大
2019/08/01 Javascript
Vue中jsx不完全应用指南小结
2019/11/01 Javascript
Vue表单控件数据绑定方法详解
2020/02/05 Javascript
在vue中使用防抖函数组件操作
2020/07/26 Javascript
[40:31]Secret vs Alliacne 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
Python编码爬坑指南(必看)
2016/06/10 Python
Python爬取数据并写入MySQL数据库的实例
2018/06/21 Python
Python拼接字符串的7种方法总结
2018/11/01 Python
Python设计模式之迭代器模式原理与用法实例分析
2019/01/10 Python
获取Pytorch中间某一层权重或者特征的例子
2019/08/17 Python
6行Python代码实现进度条效果(Progress、tqdm、alive-progress​​​​​​​和PySimpleGUI库)
2020/01/06 Python
如何通过Django使用本地css/js文件
2020/01/20 Python
python实现发送带附件的邮件代码分享
2020/09/22 Python
介绍一下Java中的Class类
2015/04/10 面试题
工艺员岗位职责
2014/02/11 职场文书
委托书模板
2014/04/04 职场文书
雷锋之歌观后感
2015/06/10 职场文书
MongoDB数据库常用的10条操作命令
2021/06/18 MongoDB
vue如何使用模拟的json数据查看效果
2022/03/31 Vue.js
Java结构型设计模式之组合模式详解
2022/09/23 Java/Android