小程序实践(十二):七牛云上传图片
2018-10-29 15:27:40来源:博客园 阅读 ()
小程序更换用户头像功能、更换图片等功能
思路图片上传七牛云,成功之后返回的图片url上传项目服务器
------------------------------------------------------------------------------------------------------
先选择图片
小程序提供api :chooseImage
var that = this wx.chooseImage({ sourceType: ['album', 'camera'], // 相册选取+拍摄选取 sizeType: ['compressed'], // 压缩图 count: 1, // 最多可以选择的图片张数 success: function(res) { // 成功 , 显示图片 that.setData({ userAvatar: res.tempFilePaths }) //上传图片到七牛 wx.showLoading({ title: '', mask: true }) that.updateImg(res.tempFilePaths, that.data.token) }, fail: function(res) { // 失败 } })
------------------------------------------------------------------------------------------------------
获取到图片之后 上传图片到七牛云
准备:
先下载配置小程序七牛云的sdk
下载地址:https://developer.qiniu.com/sdk#community-sdk
找到小程序的sdk 点击安装
下载一个文件 ,解压缩之后找到sdk目录下的 qiniuUploader.js 文件 复制到小程序项目的utils目录下,配置就完成了。
------------------------------------------------------------------------------------------------------
使用:
1、在需要用到七牛云的页面 require 七牛云的sdk
2、使用qiniuUploader上传图片
注意,uptoken uploadURL domain 是从服务器获取到的 , key就是上传到七牛云的图片路径+文件名
//上传图片到七牛 updateImg: function(filePath, uptoken) { var that = this var pathX = filePath + '' var qiniu_key = Date.parse(new Date()) / 1000 + ".jpg" qiniuUploader.upload(pathX, (res) => { // 将图片url上传给服务器 if (that.data.domain[that.data.domain.length - 1] == '/') { that.setData({ userAvatar: that.data.domain + qiniu_key }) console.log('avatar_url:' + that.data.userAvatar) } else { that.setData({ userAvatar: that.data.domain + '/' + qiniu_key }) } // 图片上传成功之后取消加载框 wx.hideLoading() }, (error) => { // 图片上传失败之后取消加载框 wx.hideLoading() // 把图片更改回来 that.setData({ userAvatar: that.data.userInfo.avatar }) }, { key: qiniu_key, uptoken: that.data.token, // 从自己的服务器获取 uploadURL: that.data.qiniu_url, // 从自己的服务器获取 domain: that.data.domain, // 从自己的服务器获取 }); },
3、注意上面在
that.updateImg(res.tempFilePaths, that.data.token)
之前进行了一步显示加载框的操作,并设置 mask:true
wx.showLoading({ title: '', mask: true })
该属性作用:是否显示透明蒙层,防止触摸穿透,默认是false
这里设置为true ,则为了加载框不消失的情况下,无法进行别的触摸操作
因为要上传图片到七牛云,这是一个异步操作,如果上传图片到七牛云还没有成功,用户点击了退出或者保存按钮,就会导致七牛云返回的图片url没有更新到服务器
所以在图片上传七牛云结果里面再进行关闭加载框 就能保证 上传图片到七牛云这个操作完成之后才能进行别的触摸操作。
--------------------------------------------------------------------------------------
小程序实践(一):主页tab选项实现
小程序实践(二):swiper组件实现轮播图效果
小程序实践(三):九宫格实现及item跳转
小程序实践(四):动态控制组件的显示/隐藏
小程序实践(五):for循环绑定item的点击事件
小程序实践(六):view内部组件排版
小程序实践(七):页面间传值
小程序实践(八):验证码倒计时功能
小程序实践(九):返回到上一个界面并传值回去
小程序实践(十):textarea实现简单的编辑文本界面
小程序实践(十一):showModal的使用
小程序实践(十二):七牛云上传图片
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- 基于JQuery的多标签实现代码 2020-03-29
- 微信小程序开发图片拖拽实例详解 2020-03-16
- 高效的jQuery代码编写技巧总结 2020-02-15
- input标签内容改变的触发事件介绍 2019-11-27
- 详解jQuery bind事件的操作方法 2019-11-03
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash