微信小程序教程之本地图片上传(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模版引擎-tmpl的bug修复与性能优化分析
Oct 23 Javascript
各种页面定时跳转(倒计时跳转)代码总结
Oct 24 Javascript
js报$ is not a function 的问题的解决方法
Jan 20 Javascript
javascript HTML5 canvas实现打砖块游戏
Jun 18 Javascript
[原创]Bootstrap 中下拉菜单修改成鼠标悬停直接显示
Apr 14 Javascript
js仿淘宝商品放大预览功能
Mar 15 Javascript
js遍历获取表格内数据的方法(必看)
Apr 06 Javascript
Vue组件化通讯的实例代码
Jun 23 Javascript
JavaScript中使用参数个数实现重载功能
Sep 01 Javascript
vue 点击按钮实现动态挂载子组件的方法
Sep 07 Javascript
详解微信小程序中组件通讯
Oct 30 Javascript
js实现简单的点名器随机色实例代码
Sep 20 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
Smarty安装配置方法
2008/04/10 PHP
对squid中refresh_pattern的一些理解和建议
2009/04/17 PHP
记录mysql性能查询过程的使用方法
2013/05/02 PHP
php stream_get_meta_data返回值
2013/09/29 PHP
给WordPress中的留言加上楼层号的PHP代码实例
2015/12/14 PHP
php中json_encode不兼容JSON_UNESCAPED_UNICODE的解决方案
2016/05/31 PHP
laravel 字段格式化 modle 字段类型转换方法
2019/09/30 PHP
javascript获取鼠标位置部分的实例代码(兼容IE,FF)
2013/08/05 Javascript
js实现的常用的左侧导航效果
2013/10/17 Javascript
基于jquery插件制作左右按钮与标题文字图片切换效果
2013/11/07 Javascript
浅析vue深复制
2018/01/29 Javascript
JS如何寻找数组中心索引过程解析
2020/06/01 Javascript
小程序自动化测试的示例代码
2020/08/11 Javascript
解决vue中axios设置超时(超过5分钟)没反应的问题
2020/09/04 Javascript
[01:57]DOTA2上海特锦赛小组赛解说单车采访花絮
2016/02/27 DOTA
python实现百度关键词排名查询
2014/03/30 Python
Python中的对象,方法,类,实例,函数用法分析
2015/01/15 Python
Django 实现购物车功能的示例代码
2018/10/08 Python
numpy库与pandas库axis=0,axis= 1轴的用法详解
2019/05/27 Python
pandas的to_datetime时间转换使用及学习心得
2019/08/11 Python
Python数据结构dict常用操作代码实例
2020/03/12 Python
flask框架中的cookie和session使用
2021/01/31 Python
html5 postMessage解决跨域、跨窗口消息传递方案
2016/12/20 HTML / CSS
廉价航班、机票和酒店:JustFly
2018/02/07 全球购物
大众服装店创业计划书范文
2014/01/01 职场文书
大学秋游活动方案
2014/02/11 职场文书
毕业典礼主持词大全
2014/03/26 职场文书
乔丹名人堂演讲稿
2014/05/24 职场文书
市级绿色学校申报材料
2014/08/25 职场文书
流动人口婚育证明范本
2014/09/26 职场文书
村支部书记群众路线对照检查材料思想汇报
2014/10/08 职场文书
毕业论文致谢格式模板
2015/05/14 职场文书
幼儿园老师工作总结2015
2015/05/22 职场文书
幼儿园音乐教学反思
2016/02/18 职场文书
送给火锅店的创意营销方案!
2019/07/08 职场文书
python文件目录操作之os模块
2021/05/08 Python