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


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 AutoComplete自动完成 的使用方法实例
Mar 19 Javascript
javascript基础知识大集锦(二) 推荐收藏
Jan 13 Javascript
一个简单的弹性返回顶部JS代码实现介绍
Jun 09 Javascript
vueJS简单的点击显示与隐藏的效果【实现代码】
May 03 Javascript
JS 全屏和退出全屏详解及实例代码
Nov 07 Javascript
node+experss实现爬取电影天堂爬虫
Nov 20 Javascript
12 款 JS 代码测试必备工具(翻译)
Dec 13 Javascript
如何快速解决JS或Jquery ajax异步跨域的问题
Jan 08 jQuery
使用post方法实现json往返传输数据的方法
Mar 30 Javascript
详解JavaScript 新语法之Class 的私有属性与私有方法
Apr 23 Javascript
5分钟快速看懂ES6中的反射与代理
Dec 19 Javascript
Vue如何实现验证码输入交互
Dec 07 Vue.js
微信小程序实现登录页云层漂浮的动画效果
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实现采集程序原理和简单示例代码
2007/03/18 PHP
PHP初学者最感迷茫的问题小结
2010/03/27 PHP
php中获取指定IP的物理地址的代码(正则表达式)
2011/06/23 PHP
php DOS攻击实现代码(附如何防范)
2012/05/29 PHP
保存到桌面、设为桌面且带图标的PHP代码
2013/11/19 PHP
PHP生成条形图的方法
2014/12/10 PHP
解决jquery实现的radio重新选中的问题
2015/07/03 Javascript
js本地图片预览实现代码
2016/10/09 Javascript
基于jQuery实现Accordion手风琴自定义插件
2020/10/13 Javascript
浅析Node.js:DNS模块的使用
2016/11/23 Javascript
详解handlebars+require基本使用方法
2016/12/21 Javascript
Angular2 PrimeNG分页模块学习
2017/01/14 Javascript
jQuery Ajax实现跨域请求
2017/01/21 Javascript
layerUI下的绑定事件实例代码
2018/08/17 Javascript
nodejs检测因特网是否断开的解决方案
2019/04/17 NodeJs
javascript实现动态时钟的启动和停止
2020/07/29 Javascript
vue与django集成打包的实现方法
2019/11/11 Javascript
微信小程序封装多张图片上传api代码实例
2019/12/30 Javascript
JavaScript实现简单的计算器
2020/01/16 Javascript
JavaScript监听键盘事件代码实现
2020/06/03 Javascript
Python中线程编程之threading模块的使用详解
2015/06/23 Python
Python编写电话薄实现增删改查功能
2016/05/07 Python
使用python进行拆分大文件的方法
2018/12/10 Python
创建Django项目图文实例详解
2019/06/06 Python
python3 sorted 如何实现自定义排序标准
2020/03/12 Python
vue常用指令代码实例总结
2020/03/16 Python
Python+Kepler.gl实现时间轮播地图过程解析
2020/07/20 Python
HTML5中微数据概述及在搜索引擎中的使用举例
2013/02/07 HTML / CSS
请写一个C函数,若处理器是Big_endian的,则返回0;若是Little_endian的,则返回1
2015/07/16 面试题
MVC的各个部分都有那些技术来实现?如何实现?
2016/04/21 面试题
税务专业毕业生自荐信
2013/11/10 职场文书
党的群众路线对照检查材料范文
2014/09/24 职场文书
社区植树节活动总结
2015/02/06 职场文书
走近毛泽东观后感
2015/06/04 职场文书
pandas进行数据输入和输出的方法详解
2022/03/23 Python
Python用tkinter实现自定义记事本的方法详解
2022/03/31 Python