微信小程序教程之本地图片上传(leancloud)实例详解


Posted in Javascript onNovember 16, 2016

微信小程序 leancloud ——本地图片上传

          由于本站最近学习微信小程序的知识,这里记录下微信小程序实现本地上传的功能实现方法,以下是网上找的资料,大家看下。

将本地图片上传至leancloud后台.

微信小程序教程之本地图片上传(leancloud)实例详解

获取本地图片或者拍照,我在上一篇博文中写过.这里就不说了.我的博客

直接上代码:

1.index.js

//index.js 
//获取应用实例 
var app = getApp() 
const AV = require('../../utils/av-weapp.js'); 
Page({ 
 data: { 
 tempFilePaths: '' 
 }, 
 onLoad: function () { 
 AV.init({ 
  appId: 'EJx0NSfY*********-gzGzoHsz', 
  appKey: 'FBVPg5G*******T97SNQj', 
 }); 
 }, 
 chooseimage: function () { 
 var _this = this; 
 wx.chooseImage({ 
  count: 9, // 默认9 
  sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有 
  sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有 
  success: function (res) { 
  // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片 
  _this.setData({ 
   tempFilePaths: res.tempFilePaths 
  }) 
  var tempFilePath = res.tempFilePaths[0]; 
  new AV.File('file-name', { 
   blob: { 
   uri: tempFilePath, 
   }, 
  }).save().then( 
   file => console.log(file.url()) 
   ).catch(console.error); 
  } 
 }) 
 } 
})

通过file.url()可以拿到图片的url,下面是我上传后其中一张图片的url

http://ac-ejx0nsfy.clouddn.com/6a0b4c301fed32d0e2a8

微信小程序教程之本地图片上传(leancloud)实例详解

如果有同学用到leancloud,可以参照.其他可以看看文档.

微信小程序上传本地图片文件

2.index.wxml

<!--index.wxml--> 
<button style="margin:30rpx;" bindtap="chooseimage">获取图片</button> 
<image src="{{tempFilePaths }}" mode="aspecFill" style="width: 100%; height: 450rpx"/>

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

Javascript 相关文章推荐
为JavaScript类型增加方法的实现代码(增加功能)
Dec 29 Javascript
js实现图片轮换效果代码
Apr 16 Javascript
jquery对象和javascript对象即DOM对象相互转换
Aug 07 Javascript
简介JavaScript中toUpperCase()方法的使用
Jun 06 Javascript
使用RequireJS优化JavaScript引用代码的方法
Jul 01 Javascript
在JavaScript中call()与apply()区别
Jan 22 Javascript
jQuery EasyUI常用数据验证汇总
Sep 18 Javascript
jquery pagination插件动态分页实例(Bootstrap分页)
Dec 23 Javascript
js Canvas绘制圆形时钟教程
Feb 06 Javascript
Bootstrap3 多个模态对话框无法显示的解决方案
Feb 23 Javascript
bootstrap如何让dropdown menu按钮式下拉框长度一致
Apr 10 Javascript
使用Angular CLI快速创建Angular项目的一些基本概念和写法小结
Apr 22 Javascript
Javascript使用uploadify来实现多文件上传
Nov 16 #Javascript
微信小程序 地图(map)实例详解
Nov 16 #Javascript
微信小程序 选择器(时间,日期,地区)实例详解
Nov 16 #Javascript
微信小程序 图片等比例缩放(图片自适应屏幕)
Nov 16 #Javascript
js以分隔符分隔数组中的元素并转换为字符串的方法
Nov 16 #Javascript
微信小程序 实现拖拽事件监听实例详解
Nov 16 #Javascript
jQuery中checkbox反复调用attr('checked', true/false)只有第一次生效的解决方法
Nov 16 #Javascript
You might like
php实现文件下载更能介绍
2012/11/23 PHP
关于PHP堆栈与列队的学习
2013/06/21 PHP
PHP实现远程下载文件到本地
2015/05/17 PHP
php生成过去100年下拉列表的方法
2015/07/20 PHP
javascript中的作用域scope介绍
2010/12/28 Javascript
js常用代码段整理
2011/11/30 Javascript
深入理解JavaScript系列(9) 根本没有“JSON对象”这回事!
2012/01/15 Javascript
Javascript 实现的数独解题算法网页实例
2013/10/15 Javascript
nodejs开发环境配置与使用
2014/11/17 NodeJs
详解Javascript继承的实现
2016/03/25 Javascript
可输入文字查找ajax下拉框控件 ComBox的实现方法
2016/10/25 Javascript
使用mint-ui实现省市区三级联动效果的示例代码
2018/02/09 Javascript
详解webpack引入第三方库的方式以及注意事项
2019/01/15 Javascript
vue悬浮可拖拽悬浮按钮的实例代码
2019/08/20 Javascript
Vue 组件的挂载与父子组件的传值实例
2020/09/02 Javascript
Antd-vue Table组件添加Click事件,实现点击某行数据教程
2020/11/17 Javascript
[00:17]DOTA2荣耀之路5:It’s a disastah!
2018/05/28 DOTA
[42:20]Secret vs Liquid 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
Flask SQLAlchemy一对一,一对多的使用方法实践
2013/02/10 Python
Python实现的爬虫刷回复功能示例
2018/06/07 Python
解决python字典对值(值为列表)赋值出现重复的问题
2019/01/20 Python
python编写简单端口扫描器
2019/09/04 Python
Python 经典算法100及解析(小结)
2019/09/13 Python
django中的图片验证码功能
2019/09/18 Python
python GUI库图形界面开发之PyQt5不规则窗口实现与显示GIF动画的详细方法与实例
2020/03/09 Python
Xadmin+rules实现多选行权限方式(级联效果)
2020/04/07 Python
python线程池 ThreadPoolExecutor 的用法示例
2020/10/10 Python
纯HTML5+CSS3制作生日蛋糕代码
2016/11/16 HTML / CSS
银行出纳岗位职责
2013/11/25 职场文书
护理学应聘自荐书范文
2014/02/05 职场文书
请假条的格式
2014/04/11 职场文书
管理岗位竞聘演讲稿
2014/08/18 职场文书
离婚协议书怎么写
2014/09/12 职场文书
pandas 实现将NaN转换为None
2021/05/14 Python
python+opencv实现视频抽帧示例代码
2021/06/11 Python
python使用torch随机初始化参数
2022/03/22 Python