微信小程序 图片上传实例详解


Posted in Javascript onMay 05, 2017

一.了解wx.chooseImage(OBJECT)

微信小程序 图片上传实例详解

二.代码编程

在pages文件里面创建uploadimg文件夹

1.编写页面结构:uploadimg.wxml

<view class="container" style="padding:1rem;"> 
  <button type="primary"bindtap="chooseimage">获取图片</button>  
  <image src="{{tempFilePaths }}" mode="aspecFill" style="width: 100%; height: 450rpx;margin:1rem 0;"/>  
</view>

微信小程序 图片上传实例详解
2.设置数据:uploadimg.js

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

微信小程序 图片上传实例详解

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
Highslide.js是一款基于js实现的网页中图片展示插件
Mar 30 Javascript
javascript 表格排序和表头浮动效果(扩展SortTable)
Apr 07 Javascript
js取滚动条的尺寸的函数代码
Nov 30 Javascript
jQuery在IE下使用未闭合的xml代码创建元素时的Bug介绍
Jan 10 Javascript
javascript实现百度地图鼠标滑动事件显示、隐藏
Apr 02 Javascript
js中函数声明与函数表达式
Jun 03 Javascript
JavaScript中的toLocaleLowerCase()方法使用详解
Jun 06 Javascript
jQuery动态改变多行文本框高度的方法
Sep 07 Javascript
jquery,js简单实现类似Angular.js双向绑定
Jan 13 Javascript
jQuery实现动态控制页面元素的方法分析
Dec 20 jQuery
layer弹出层 iframe层去掉滚动条的实例代码
Aug 17 Javascript
原生JavaScript实现随机点名表
Jan 14 Javascript
微信小程序实现登录页云层漂浮的动画效果
May 05 #Javascript
xmlplus组件设计系列之图标(ICON)(1)
May 05 #Javascript
xmlplus组件设计系列之网格(DataGrid)(10)
May 05 #Javascript
移动端web滚动分页的实现方法
May 05 #Javascript
vue.js之vue-cli脚手架的搭建详解
May 05 #Javascript
Vue中使用vux的配置详解
May 05 #Javascript
Angular directive递归实现目录树结构代码实例
May 05 #Javascript
You might like
PHP循环获取GET和POST值的代码
2008/04/09 PHP
使用PHPMailer发送邮件实例
2017/02/15 PHP
PHP使用PDO、mysqli扩展实现与数据库交互操作详解
2019/07/20 PHP
一段利用WSH修改和查看IP配置的代码
2008/05/11 Javascript
jquery获取input表单值的代码
2010/04/19 Javascript
Json2Template.js 基于jquery的插件 绑定JavaScript对象到Html模板中
2011/10/29 Javascript
批量实现面向对象的实例代码
2013/07/01 Javascript
探讨js中的双感叹号判断
2013/11/11 Javascript
教你如何使用PHP输出中文JSON字符串
2014/05/22 Javascript
基于jQuery实现仿淘宝套餐选择插件
2015/03/04 Javascript
JS实现超简单的仿QQ折叠菜单效果
2015/09/21 Javascript
JavaScript中的ajax功能的概念和示例详解
2016/10/17 Javascript
JS实现css hover操作的方法示例
2017/04/07 Javascript
jQuery完成表单验证的实例代码(纯代码)
2017/09/30 jQuery
vue 虚拟dom的patch源码分析
2018/03/01 Javascript
JS实现面向对象继承的5种方式分析
2018/07/21 Javascript
解决vue同一slot在组件中渲染多次的问题
2018/09/06 Javascript
利用weixin-java-miniapp生成小程序码并直接返回图片文件流的方法
2019/03/29 Javascript
vue如何获取自定义元素属性参数值的方法
2019/05/14 Javascript
利用JavaScript将Excel转换为JSON示例代码
2019/06/14 Javascript
JavaScript遍历数组的方法代码实例
2020/01/14 Javascript
npm qs模块使用详解
2020/02/07 Javascript
JS实现打砖块游戏
2020/02/14 Javascript
python文件和目录操作方法大全(含实例)
2014/03/12 Python
Python实现的生成格雷码功能示例
2018/01/24 Python
Python 格式化打印json数据方法(展开状态)
2020/02/27 Python
Python编程快速上手——PDF文件操作案例分析
2020/02/28 Python
Python 实现自动完成A4标签排版打印功能
2020/04/09 Python
python实现暗通道去雾算法的示例
2020/09/27 Python
Django数据统计功能count()的使用
2020/11/30 Python
CSS3田字格列表的样式编写方法
2018/11/22 HTML / CSS
智能旅行箱:Horizn Studios
2018/04/30 全球购物
材料物理专业个人求职信
2013/12/15 职场文书
拆迁委托协议书
2014/09/15 职场文书
nginx中封禁ip和允许内网ip访问的实现示例
2022/03/17 Servers
mysql使用 not int 子查询隐含陷阱
2022/04/12 MySQL