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


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 相关文章推荐
jQuery使用手册之一
Mar 24 Javascript
Draggable Elements 元素拖拽功能实现代码
Mar 30 Javascript
点击页面其它地方隐藏该div的两种思路
Nov 18 Javascript
在Ubuntu上安装最新版本的Node.js
Jul 14 Javascript
jquery性能优化高级技巧
Aug 24 Javascript
json+jQuery实现的无限级树形菜单效果代码
Aug 27 Javascript
jquery表单验证插件validation使用方法详解
Jan 20 Javascript
Angular.JS去掉访问路径URL中的#号详解
Mar 30 Javascript
详解开源的JavaScript插件化框架MinimaJS
Oct 26 Javascript
vue的三种图片引入方式代码实例
Nov 19 Javascript
微信小程序获取复选框全选反选选中的值(实例代码)
Dec 17 Javascript
部署vue+Springboot前后端分离项目的步骤实现
May 31 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数组函数array_walk用法示例
2016/05/26 PHP
php实现的mongoDB单例模式操作类
2018/01/20 PHP
浅谈Laravel POST,PUT,PATCH 路由的区别
2019/10/15 PHP
Highslide.js是一款基于js实现的网页中图片展示插件
2020/03/30 Javascript
匹配任意字符的正则表达式写法
2010/04/29 Javascript
javascript中节点的最近的相关节点访问方法
2013/03/20 Javascript
jQuery验证元素是否为空的两种常用方法
2015/03/17 Javascript
解析javascript瀑布流原理实现图片滚动加载
2016/03/10 Javascript
微信小程序购物商城系统开发系列-目录结构介绍
2016/11/21 Javascript
bootstrap laydate日期组件使用详解
2017/01/04 Javascript
原生js实现轮播图的示例代码
2017/02/20 Javascript
jQuery布局组件EasyUI Layout使用方法详解
2017/02/28 Javascript
jQuery中clone()函数实现表单中增加和减少输入项
2017/05/13 jQuery
vue 优化CDN加速的方法示例
2018/09/19 Javascript
python创建只读属性对象的方法(ReadOnlyObject)
2013/02/10 Python
解决Python中由于logging模块误用导致的内存泄露
2015/04/23 Python
Python版微信红包分配算法
2015/05/04 Python
使用Python操作MySQL的一些基本方法
2015/08/16 Python
python中OrderedDict的使用方法详解
2017/05/05 Python
windows下python安装paramiko模块和pycrypto模块(简单三步)
2017/07/06 Python
python中的break、continue、exit()、pass全面解析
2017/08/05 Python
Python嵌套式数据结构实例浅析
2019/03/05 Python
python-序列解包(对可迭代元素的快速取值方法)
2019/08/24 Python
详解Python图像处理库Pillow常用使用方法
2019/09/02 Python
python实现门限回归方式
2020/02/29 Python
Python requests上传文件实现步骤
2020/09/15 Python
python如何获得list或numpy数组中最大元素对应的索引
2020/11/16 Python
施华洛世奇韩国官网:SWAROVSKI韩国
2018/06/05 全球购物
加拿大领先家居家具网上购物:Aosom.ca
2020/05/27 全球购物
新闻专业个人自我评价
2013/09/21 职场文书
幼儿园老师寄语
2014/04/03 职场文书
升职自我推荐信范文
2015/03/25 职场文书
MySQL常见优化方案汇总
2022/01/18 MySQL
教你如何让spark sql写mysql的时候支持update操作
2022/02/15 MySQL
vue ant design 封装弹窗表单的使用
2022/06/01 Vue.js
windows11选中自动复制怎么开启? Win11自动复制所选内容的方法
2022/07/23 数码科技