微信小程序教程之本地图片上传(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 相关文章推荐
java script编程起步(第三课)
Jan 10 Javascript
5秒后跳转到另一个页面的js代码
Oct 12 Javascript
用正则表达式替换图片地址img标签
Nov 22 Javascript
node.js中的url.parse方法使用说明
Dec 10 Javascript
JavaScript获得当前网页来源页面(即上一页)的方法
Apr 03 Javascript
jquery插件autocomplete用法示例
Jul 01 Javascript
JS简单实现浮动窗口效果示例
Sep 07 Javascript
Vue axios 中提交表单数据(含上传文件)
Jul 06 Javascript
vue router下的html5 history在iis服务器上的设置方法
Oct 18 Javascript
实例详解BootStrap的动态模态框及静态模态框
Aug 13 Javascript
简述pm2常用命令集合及配置文件说明
May 30 Javascript
使用Ajax实现无刷新上传文件
Apr 12 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新手上路(二)
2006/10/09 PHP
Linux下进行MYSQL编程时插入中文乱码的解决方案
2007/03/15 PHP
初学PHP的朋友 经常问的一些问题。不断更新
2011/08/11 PHP
Android AsyncTack 异步任务实例详解
2016/11/02 PHP
yii2中LinkPager增加总页数和总记录数的实例
2017/08/28 PHP
PHP面向对象多态性实现方法简单示例
2017/09/27 PHP
jQuery学习笔记之jQuery的动画
2010/12/22 Javascript
JavaScript如何从listbox里同时删除多个项目
2013/10/12 Javascript
js鼠标悬浮出现遮罩层的方法
2015/01/28 Javascript
JavaScript中的对象与JSON
2015/07/03 Javascript
js关于getImageData跨域问题的解决方法
2016/10/14 Javascript
javascript 正则表达式去空行方法
2017/01/24 Javascript
js 去掉字符串前后空格实现代码集合
2017/03/25 Javascript
简单谈谈CommonsChunkPlugin抽取公共模块
2017/12/31 Javascript
vue.js 获取select中的value实例
2018/03/01 Javascript
Vue中如何实现proxy代理
2018/04/20 Javascript
如何提升vue.js中大型数据的性能
2019/06/21 Javascript
详解实现vue的数据响应式原理
2021/01/20 Vue.js
[50:29]2014 DOTA2华西杯精英邀请赛 5 24 DK VS iG
2014/05/26 DOTA
[03:14]辉夜杯主赛事 12月25日每日之星
2015/12/26 DOTA
PHP webshell检查工具 python实现代码
2009/09/15 Python
基于wxpython开发的简单gui计算器实例
2015/05/30 Python
Python实现的微信公众号群发图片与文本消息功能实例详解
2017/06/30 Python
Python 3实战爬虫之爬取京东图书的图片详解
2017/10/09 Python
Python字符串格式化%s%d%f详解
2018/02/02 Python
Python将文本去空格并保存到txt文件中的实例
2018/07/24 Python
twilio python自动拨打电话,播放自定义mp3音频的方法
2019/08/08 Python
django多种支付、并发订单处理实例代码
2019/12/13 Python
TensorFlow设置日志级别的几种方式小结
2020/02/04 Python
python 密码学示例——理解哈希(Hash)算法
2020/09/21 Python
HTML5是什么 HTML5是什么意思 HTML5简介
2012/10/26 HTML / CSS
int和Integer有什么区别
2013/05/25 面试题
爱情检讨书大全
2014/01/21 职场文书
单位授权委托书范本
2014/09/26 职场文书
Java并发编程之Executor接口的使用
2021/06/21 Java/Android
MySQL中的引号和反引号的区别与用法详解
2021/10/24 MySQL