Slog71_选取、上传和显示本地图片GET !(微信小程序之云开发-全栈时代3)
- ArthurSlog
- SLog-71
- Year·1
- Guangzhou·China
- Sep 12th 2018
道常无为而无不为
开发环境MacOS(High Sierra 10.13.5)
需要的信息和信息源:
前言
- ”云开发“ 封装好了一些常用的业务逻辑,提供了以下方面的相关API供开发者使用:
- 云函数
- 数据库
- 存储管理
开始编码
- 现在先把微信开发工具更新至最新(1.02.1809101),有部分开发人员在微信社区反馈更新之后没有看到“云开发”的按钮
- 解决办法:点击检查更新,等待更新完全完成之后重启开发工具
- 重点:云开发方式需要appid,请准备好
- 当前云开发模版的微信小程序文件结构如下:
cloudfunctions
| - login
| - index.js
| - package.json
| - package-lock.json
| - arthurSlog_getInfo
| - index.js
| - package.json
| - package-lock.json
| - arthurSlog_methodAdd
| - index.js
| - package.json
| - package-lock.json
miniprogram
| - images
| - code-db-inc-dec.png
| - code-db-onAdd.png
| - code-db-onQuery.png
| - code-db-onRemove.png
| - code-func-sum.png
| - console-entrance.png
| - create-collection.png
| - pages
| - addFunction
| - addFunction.js
| - addFunction.json
| - addFunction.wxml
| - addFunction.wxss
| - chooseLib
| - chooseLib.js
| - chooseLib.json
| - chooseLib.wxml
| - chooseLib.wsxx
| - databaseGuide
| - databaseGuide.js
| - databaseGuide.json
| - databaseGuide.wxml
| - databaseGuide.wxss
| - deployFunctions
| - deployFunctions.js
| - deployFunctions.json
| - deployFunctions.wxml
| - deployFunctions.wxss
| - index
| - index.js
| - index.wxml
| - index.wxss
| - user-unlogin.png
| - storageConsole
| - storageConsole.js
| - storageConsole.json
| - storageConsole.wxml
| - storageConsole.wxss
| - userConsole
| - userConsole.js
| - userConsole.json
| - userConsole.wxml
| - userConsole.wxss
| - style
| - guide.wxss
| - app.js
| - app.json
| - app.wxss
README.md
project.config.json
- 在使用“云开发”的时候,需要先调用 初始化函数 init
- 小程序端的初始化函数是 wx.cloud.init()
- 云端的初始化函数是 const cloud = require('wx-server-sdk') cloud.init())
Client:
miniprogram/app.js
//app.js
App({
onLaunch: function () {
if (!wx.cloud) {
console.error('请使用 2.2.3 或以上的基础库以使用云能力')
} else {
wx.cloud.init({
env: 'arthurslog-test-d4537a',
traceUser: true,
})
}
this.globalData = {}
}
})
Server:
cloudfunctions/arthurSlog_getInfo/index.js
// 云函数入口文件
const cloud = require('wx-server-sdk')
cloud.init()
// 云函数入口函数
exports.main = async(event, context) => {
return event.userInfo
}
- 上面的Server端代码中
Server:
cloudfunctions/arthurSlog_getInfo/index.js
// 云函数入口文件
//const cloud = require('wx-server-sdk')
//cloud.init()
// 云函数入口函数
exports.main = async(event, context) => {
return event.userInfo
}
- 没有调用到 “wx-server-sdk” 的方法,所以可以注释掉,不影响结果
- 这里提醒一下,就是 cloudfunctions 路径下的文件的名称,就是云端向小程序端提供的方法
- 举个栗子:对于cloudfunctions/arthurSlog_getInfo来说,arthurSlog_getInfo这个文件夹的名字就是云端向小程序端提供的方法
- 现在在小程序端就可以参考小程序端API文档(客户端)
- 大部分函数都来源于 对象“wx”,这个 “wx”对象 就类似于服务端的 “wx-server-sdk”对象
- 比如,在小程序端(客户端)有 wx.cloud.callFunction()、wx.cloud.uploadFile()等方法
- 再比如,在云端(服务端)有 cloud.init()、cloud.database()、cloud.collection()等方法
- 现在,我们来接触一下 “小程序·云开发” 的 “存储管理功能”
- 打开小程序端的 miniprogram/pages/index/index.js
Client
miniprogram/pages/index/index.js
Page({
data: {
avatarUrl: './user-unlogin.png',
userInfo: {},
logged: false,
takeSession: false,
requestResult: '',
fileID: '',
cloudPath: '',
imagePath: './user-unlogin.png',
},
// ...
// ...
// ...
// 添加前端代码,向云端上传图片
arthurSlog_uploadImg: function() {
// 选择图片
const this_ = this
wx.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success(res) {
// tempFilePath可以作为img标签的src属性显示图片
const tempFilePaths = res.tempFilePaths
this_.setData({
imagePath: tempFilePaths[0],
})
console.log(tempFilePaths[0])
}
})
},
})
- 在这里,我们定义了一个方法arthurSlog_uploadImg,参考 小程序官方文档
- 首先将当前环境对象 映射 给对象 this_
Client
miniprogram/pages/index/index.js
const this_ = this
- 使用 wx.chooseImage 方法,打开本地文件,选择要上传的文件
- 在success函数里,使用setdata函数,更新 imagePath 对象的值,并使得页面上对应的部分重新渲染
- 现在,我们来更新页面文件:
Client
miniprogram/pages/index/index.wxml
<!--index.wxml-->
<view class="container">
<!-- ... -->
<!-- 获取 openid -->
<view class="uploader">
<button class="userinfo-nickname" bindtap="arthurSlog_getInfo">点击获取 openid</button>
</view>
<!-- 返回两个对象之和 -->
<view class="uploader">
<button class="userinfo-nickname" bindtap="arthurSlog_methodAdd">点击返回两个对象之和</button>
</view>
<!-- 上传图片 -->
<view class="uploader">
<button class="userinfo-nickname" bindtap="arthurSLog_uploadImg">上传图片</button>
</view>
<!-- 显示图片 -->
<view>
<image class="img" src="{{imagePath}}" mode="scaleToFill"></image>
</view>
</view>
- 这次使用的方法,不需要自己编写云端服务代码,腾讯公司已经提供了
- 保存文件,在模拟器中点击上传图片(我放了一张演示图片在此路径下:miniprogram/images/ArthurSlog.png)
- 选中要上传的文件,点击“打开”
- 正常执行之下,会显示出我们刚刚上传的图片,到这里暂停一下,现在图片还没发送出去
- 在下一篇中,再继续补充
- 至此,我们实现了一个选取本地文件,并显示选中的图片文件。
欢迎关注我的微信公众号 ArthurSlog
如果你喜欢我的文章 欢迎点赞 留言
谢谢
本文转载于:Slog71_选取、上传和显示本地图片GET !(微信小程序之云开发-全栈时代3)
Slog71_选取、上传和显示本地图片GET !(微信小程序之云开发-全栈时代3)的更多相关文章
- 微信小程序开发技巧总结(二) -- 文件的选取、移动、上传和下载
微信小程序开发技巧总结(二) -- 文件的选取.移动.上传和下载 1.不同类型文件的选取 1.1 常用的图片 视频 对于大部分开发者来说,需要上传的文件形式主要为图片,微信为此提供了接口. wx.ch ...
- [转]微信小程序开发(二)图片上传+服务端接收
本文转自:http://blog.csdn.net/sk719887916/article/details/54312573 文/YXJ 地址:http://blog.csdn.net/sk71988 ...
- 微信小程序开发之多图片上传+服务端接收
前言: 业务需求,这次需要做一个小程序同时选中三张图片一起上传到服务端,后端使用的.NET WEBAPI接收数据保存. 使用技术: 在这章中将会使用到微信小程序wx.uploadFile(Object ...
- 微信小程序_(校园视)开发上传视频业务
微信小程序_(校园视) 开发用户注册登陆 传送门 微信小程序_(校园视) 开发上传视频业务 传送门 微信小程序_(校园视) 开发视频的展示页-上 传送门 微信小程序_(校园视) 开发视频的展示页-下 ...
- 微信小程序--地图上添加图片
如何在微信小程序地图添加上,添加图片? 在微信小程序中,地图的层级最高,所以我们没有办法,通过定位,在地图上添加图片等信息; 处理办法: 添加控件:controls; 其中有个属性position,进 ...
- 微信小程序--图片相关问题合辑
图片上传相关文章 微信小程序多张图片上传功能 微信小程序开发(二)图片上传 微信小程序上传一或多张图片 微信小程序实现选择图片九宫格带预览 ETL:微信小程序之图片上传 微信小程序wx.preview ...
- 微信小程序初体验(上)
版权声明:本文由练小习原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/204 来源:腾云阁 https://www.qclo ...
- 《微信小程序商城开发实战》笔者的新书,欢迎各位粉丝上京东购买
作者图书京东链接,请点击------>>> **微信小程序商城开发实战** 附京东真实评价截图: 编辑推荐 在当今移动互联网大潮中,微信应用凭借其庞大的用户基数和极强的用户黏性 ...
- 微信小程序--投票小程序设计与实现(图片、视频发布、分组、审核、排名)
投票微信小程序设计与实现(图片.视频发布.分组.审核.排名) 之前接到一个需求,设计一个类似H5 投票系统之类的小程序,我绞尽脑汁,冥思苦想,最后终于做了出来. 再次感谢 @文晓港 的ColorU ...
随机推荐
- 如何设置计算机IP地址
今天公司变更网络环境让同学们设置IP地址,我竟然不会,我问了一句IP还能自己设置啊,.low爆了,于是赶紧百度,现总结如下 IP地址的设置一种是静态IP,一种是自动获取IP(之前都是自动获取的吧,而且 ...
- 面向对象编程(C++篇2)——构造
目录 1. 引述 2. 详述 2.1. 数据类型初始化 2.2. 类初始化 1. 引述 在C++中,学习类的第一课往往就是构造函数.根据构造函数的定义,构造函数式是用于初始化类对象的数据成员的.无论何 ...
- VirtualBox虚拟机-安装增强功能
virtualbox中win10虚拟机怎么安装增强功能 安装VBoxGuestAdditions增强功能后,可增加以下功能: 鼠标集成: 可以无缝的在宿主机与虚拟机之间移动鼠标. 自适应窗口:可以任意 ...
- unittest简介01
前言 熟悉java的应该都清楚常见的单元测试框架Junit和TestNG,python里面也有单元测试框架-unittest,相当于是一个python版的junit. 一.unittest简介 1.先 ...
- HTML 音乐
<audio preload autoplay loop id="vd"> <source src="/static/audio/hua.mp3&quo ...
- 什么是phpize及其用法
应用场景在使用php的过程中,我们常常需要去添加一些PHP扩展库.但是重新对php进行编译是比较蛮烦的,所以这时候我们可以使用phpize对php进行添加扩展.并且phpize编译的扩展库可以随时启用 ...
- LGP7814题解
lmpp 教你对着样例得到做法.jpg 题意:给定一个长度为 $ n $ 的字符串 A,要求你构造一个字符串 B,使得 A 是 B 的子序列且 A 不是 B 的子串. 首先给出无解的判断方法: if( ...
- LGP7580题解
设: \[g(x)=\prod_{i=1}^{k_i}\binom {m} {c_{d,i}+m} \] 那么很明显有: \[f= a * g \] 再看一眼 \(g\),我们发现 \(g\) 是积性 ...
- VuePress 博客之 SEO 优化(三)标题、链接优化
前言 在 <一篇带你用 VuePress + Github Pages 搭建博客>中,我们使用 VuePress 搭建了一个博客,最终的效果查看:TypeScript 中文文档. 本篇讲讲 ...
- P5018 [NOIP2018 普及组] 对称二叉树
P5018 [NOIP2018 普及组] 对称二叉树 题目 P5018 思路 通过hash值来判断左右树是否相等 \(hl[i]\) 与 \(Hl[i]\) 是防止hash冲突, \(r\) 同理 注 ...