微信小程序开发（二）图片上传+服务端接收详解
作者：码小白
字体：[ ] 类型：转载 时间：
本篇文章主要介绍了微信小程序开发（二）图片上传+服务端接收，具有一定的参考价值，有兴趣的可以了解一下。
这次介绍下小程序当中常用的图片上传。
前几天做了图片上传功能，被坑了一下。接下来我们来看一下微信的上传api。
这里的filePath就是图片的存储路径，类型居然是个String，也就是 只能每次传一张图片，我以前的接口都是接收一个array，我本人又是一个半吊子的PHP，只能自己去改接收图片的接口。
看一下页面效果图
一个很常见的修改头像效果，选择图片（拍照），然后上传。
下面就是贴代码了
首先是小程序的wxml代码
&view class="xd-container"&
&form bindsubmit="bindSaveTap"&
&image class="xd-img-user1" catchtap="chooseImageTap" src="{{logo}}"&&/image&
&view class="xd-view-section"&
&text class="xd-abs xd-flex-left xd-text-nick"&昵称&/text&
&input name="nick_name" placeholder="请输入昵称" class="xd-input" value="{{userInfo.user_name}}"/&
&view class="xd-view-section1"&
&text class="xd-abs xd-flex-left xd-text-nick"&宝宝性别&/text&
&radio-group class="xd-abs xd-radio-group" name="baby_sex"&
&label class="xd-label-radio" wx:for="{{sex_items}}" wx:key="item"&
&radio color="#3cc975" value="{{item.name}}" wx:if="{{item.name==userInfo.baby_sex}}" checked="true"/&
&radio color="#3cc975" value="{{item.name}}" wx:else checked="false"/&
&text class="xd-radio-text"&{{item.value}}&/text&
&/radio-group&
&view class="xd-view-section1"&
&text class="xd-abs xd-flex-left xd-text-nick"&宝宝年龄&/text&
&input placeholder="请输入年龄" wx:if="{{userInfo.baby_age != 0}}" value="{{userInfo.baby_age}}" class="xd-input"/&
&input name="baby_age" placeholder="请输入年龄" wx:else value="" class="xd-input"/&
&button size="default" class="xd-abs xd-subBtn" formType="submit" hover-class="xd-subBtn-hover"&保存&/button&
css代码我就不贴了，一些样式而已。
对应的JS代码
var util = require('../../../utils/util.js')
var app = getApp()
sex_items: [
{name:'1', value:'小王子'},
{name:'2', value:'小公主'},
{name:'0', value:'尚无'}
logo:null,
userInfo: {}
//事件处理函数
bindViewTap: function() {
wx.navigateTo({
// url: '../logs/logs'
// url: '../load/load'
onLoad: function () {
console.log('onLoad')
var that = this
//调用应用实例的方法获取全局数据
app.getUserInfo(function(userInfo){
//更新数据
console.log(userInfo);
that.setData({
userInfo:userInfo,
logo:userInfo.logo
bindSaveTap: function(e){
console.log(e)
var formData = {
uid:util.getUserID(),
user_name:e.detail.value.nick_name,
baby_sex:e.detail.value.baby_sex,
baby_age:e.detail.value.baby_age
console.log(formData)
app.apiFunc.upload_file(app.apiUrl.modify_user, this.data.logo, 'photos', formData,
function(res){
console.log(res);
function(){
chooseImageTap: function(){
let _this =
wx.showActionSheet({
itemList: ['从相册中选择', '拍照'],
itemColor: "#f7982a",
success: function(res) {
if (!res.cancel) {
if(res.tapIndex == 0){
_this.chooseWxImage('album')
}else if(res.tapIndex == 1){
_this.chooseWxImage('camera')
chooseWxImage:function(type){
let _this =
wx.chooseImage({
sizeType: ['original', 'compressed'],
sourceType: [type],
success: function (res) {
console.log(res);
_this.setData({
logo: res.tempFilePaths[0],
主要讲解一下JS代码
1、chooseImageTap方法
用来显示一个选择图片和拍照的弹窗，用到了微信的一个页面交互的api showActionSheet，点击查看详细使用
2、chooseWxImage方法
主要是用来选择图片以及接收图片路径回调的监听，点击查看详细使用
在chooseWxImage方法的success回调中我们可以看到，我把返回的图片路径res.tempFilePaths[0] 赋值给了logo，下面我们只需要调用upload方法就ok了，微信的uploadFile方法被我封装了一下变成了upload_file。
uploadFile方法
//上传文件
function upload_file(url, filePath, name, formData, success, fail) {
console.log('a='+filePath)
wx.uploadFile({
url: rootUrl + url,
filePath:filePath,
name:name,
'content-type':'multipart/form-data'
}, // 设置请求的 header
formData: formData, // HTTP 请求中其他额外的 form data
success: function(res){
console.log(res);
if(res.statusCode ==200 && !res.data.result_code){
typeof success == "function" && success(res.data);
typeof fail == "function" && fail(res);
fail: function(res) {
console.log(res);
typeof fail == "function" && fail(res);
filePath就是upload_file中我们传进来的logo变量，也就是图片的绝对路径。
服务器的接收图片代码
看过我上篇文章登录流程的文章的都熟悉了我服务器用的是php框架是Laravel。
这里我只贴一下接收image的代码；
if(!empty($_FILES['photos'])){
$up_arr['logo'] = upload_logo('photos','manage/images/user','logo',$user_id,0);
$up_arr['logo'] = $up_arr['logo'][0];
$user_info['logo'] = $Server_Http_Path . $up_arr['logo'];
核心方法在upload_log中。
图片接收保存
if( !function_exists('upload_logo')){
function upload_logo( $key_name='photos', $logo_path='manage/images/nurse', $pre_name='logo', $salt='',$encode = 1,$make=0 ){
$result_arr = array();
global $Server_Http_Path,$App_Error_C
//分文件夹保存
$date_info = getdate();
$year = $date_info['year'];
$mon = $date_info['mon'];
$day = $date_info['mday'];
$logo_path = sprintf("%s/%s/%s/%s",$logo_path,$year,$mon,$day);
if(!is_dir($logo_path)){
$res=mkdir($logo_path,0777,true);
//图片上传
//foreach($photos as $key =& $photo ){
$photo = $_FILES['photos'];
$name = $key_
$file_id = Input::file($name);
if(!empty($file_id) && $file_id -& isValid()){
$entension = $file_id -& getClientOriginalExtension();
if($pre_name == 'baby'){
$new_name = $pre_name . "_" . intval($salt) ."_" .time() . "_" . salt_rand(2,2);
$new_name = $pre_name . "_" . intval($salt) ."_" . salt_rand(2,2);
$path_id = $file_id -& move($logo_path,$new_name."_b.".$entension);
if(!empty($path_id)){
$path_name = $path_id-&getPathName();
$image_size=getimagesize($path_name);
$weight=$image_size["0"];////获取图片的宽
$height=$image_size["1"];///获取图片的高
if($pre_name == "baby" || $pre_name == "video") {
$photo_info['url'] = $path_
$photo_info['width'] = $
$photo_info['height'] = $
$result_arr[] = $photo_
$result_arr[] = $path_
//处理图片
if($make == 1){
$img = Image::make($path_name)-&resize(200, $height*200/$weight);
$img-&save($logo_path ."/".$new_name."_s.".$entension);
//dd($img);
// return $img-&response('jpg');
if(empty($result_arr)){
$response['result_code'] = -1006;
$response['result_msg'] = $App_Error_Conf[-1006];
return response($response);
if($encode == 1){
$result_arr = json_encode($result_arr);
return $result_
这个代码格式真的很烦人啊，我就大概整理了一下。
这样我们就入门了小程序图片上传和接口功能了。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具西西软件园多重安全检测下载网站、值得信赖的软件下载站！
→ 微信小程序怎样将图片一键生成PPT
类型：商务办公大小：40.5M语言：中文 评分：10.0
小程序怎样将图片一键生成PPT？图片如何快速生成PPT呢？利用中的一个软件，就可以快速实现。一起跟小编来试试吧！微软小蜜下载链接：微软小程序一键生成PPT方法介绍在中搜索“微软小蜜”;进入小程序之后，点击“选取图片”按钮，选择拍照，或从手机相册选取需要使用的图片;上传成功之后，小程序就是自己识别图片中的文字，并生成PPT文件。经测试，“微软小蜜”识别文字的能力很强，即便上传图片中的颜色、背景比较复杂，也能达到极高的正确率。如果偶尔辨别失误也没关系，“微软小蜜”最后会让你检查识别结果，可手动修改识别错误的地方。PPT确认保存之后，点击底部的“分享与发送”按钮，就可以直接把作品发送给同事或者朋友了。目前“微软小蜜”有二维码和邮件附件两种发送方式。&以上就是西西小编为大家整理的小程序一键生成PPT的攻略，希望对大家有所帮助。
02-1302-1302-1202-0702-0602-0601-2001-1601-1501-12
阅读本文后您有什么感想? 已有23人给出评价!
名称大小下载微信公众号图文消息可添加小程序卡片，用户可一键直达小程序
微信公众号图文消息可添加小程序卡片，用户可一键直达小程序
文章来源：本站
小程序,公众号,图文消息
微信小程序又更新功能了，在公众号文章中可以直接跳转到小程序啦！惊不惊喜！意不意外！兴不兴奋！
此前，有关公众号的小程序入口是:自定义菜单跳转、模板消息、长按二维码识别。
但是，从今天起，公众号图文消息可添加小程序卡片，用户在阅读文章时，能够一键直达小程序，比长按二维码还要快。
具体更新如下：
1、添加小程序卡片
公众号在编辑图文消息时，可以将已关联的小程序卡片添加到图文消息的正文中，用户点击就能打开小程序。
2、支持自定义编辑
公众号运营者可以自定义小程序卡片的标题和图片，以及指定小程序打开的页面。
标题：点我点我！
图片：可手动上传
页面：小程序首页或其他页面
3、全面开放
公众号图文消息支持添加小程序卡片功能对所有公众号开放。
不知道怎么在公众号图文消息里添加小程序卡片？看这里：
①登录公众号后台，点击右侧“小程序”
②选择已关联的小程序
③确认展示方式（查看样式效果）
④编辑标题、图片和小程序页面，确定添加成功
发布关注我们下载app
官方微信扫一扫关注 小程序官方微信扫一扫( 暂不支持下载 )
最新小程序
扫一扫关注我们
Copyright (C)
微信小程序商店 ICP备：粤ICP备号-1蒋文勇【未经作者本人同意，请勿以任何形式转载】
经常看到有点的小伙伴在群里问小程序用户数据解密流程，所以打算写一篇关于小程序用户敏感数据解密教程；
加密过程微信服务器完成，解密过程在小程序和自身服务器完成，即由 encryptData 得到如下数据:
"openId": "OPENID",
"nickName": "NICKNAME",
"gender": GENDER,
"city": "CITY",
"province": "PROVINCE",
"country": "COUNTRY",
"avatarUrl": "AVATARURL",
"unionId": "UNIONID",
"watermark":
"appid":"APPID",
"timestamp":TIMESTAMP
准备知识：
Base64编解码
AES算法、填充模式、偏移向量
session_key会话密钥，以及怎么存储和获取
以上3点对于理解解密流程非常重要。
根据官方文档，我梳理了大致的解密流程，如下：
小程序客户端调用wx.login，回调里面包含js_code。
然后将js_code发送到服务器A（开发者服务器）,服务器A向微信服务器发起请求附带js_code、appId、secretkey和grant_type参数，以换取用户的openid和session_key（会话密钥）。
服务器A拿到session_key后，生成一个随机数我们叫3rd_session,以3rdSessionId为key,以session_key + openid为value缓存到redis或memcached中；因为微信团队不建议直接将session_key在网络上传输，由开发者自行生成唯一键与session_key关联。其作用是：
将3rdSessionId返回给客户端，维护小程序登录态。
通过3rdSessionId找到用户session_key和openid。
客户端拿到3rdSessionId后缓存到storage，
通过wx.getUserIinfo可以获取到用户敏感数据encryptedData 。
客户端将encryptedData、3rdSessionId和偏移量一起发送到服务器A
服务器A根据3rdSessionId从缓存中获取session_key
在服务器A使用AES解密encryptedData，从而实现用户敏感数据解密
重点在6、7、8三个环节。
AES解密三个参数：
密文 encryptedData
密钥 aesKey
偏移向量 iv
服务端解密流程：
密文和偏移向量由客户端发送给服务端，对这两个参数在服务端进行Base64_decode解编码操作。
根据3rdSessionId从缓存中获取session_key，对session_key进行Base64_decode可以得到aesKey，aes密钥。
调用aes解密方法，算法为 AES-128-CBC，数据采用PKCS#7填充。
下面结合小程序实例说明解密流程：
微信登录，获取用户信息
var that = this;
wx.login({
success: function (res) {
//微信js_code
that.setData({wxcode: res.code});
//获取用户信息
wx.getUserInfo({
success: function (res) {
//获取用户敏感数据密文和偏移向量
that.setData({encryptedData: res.encryptedData})
that.setData({iv: res.iv})
使用code换取3rdSessionId
var httpclient = require('../../utils/httpclient.js')
VAR that = this
//httpclient.req(url, data, method, success, fail)
httpclient.req(
'http://localhost:8090/wxappservice/api/v1/wx/getSession',
apiName: 'WX_CODE',
code: this.data.wxcode
function(result){
var thirdSessionId = result.data.data.sessionId;
that.setData({thirdSessionId: thirdSessionId})
//将thirdSessionId放入小程序缓存
wx.setStorageSync('thirdSessionId', thirdSessionId)
function(result){
console.log(result)
发起解密请求
//httpclient.req(url, data, method, success, fail)
httpclient.req(
'http://localhost:8090/wxappservice/api/v1/wx/decodeUserInfo',
apiName: 'WX_DECODE_USERINFO',
encryptedData: this.data.encryptedData,
iv: this.data.iv,
sessionId: wx.getStorageSync('thirdSessionId')
function(result){
//解密后的数据
console.log(result.data)
function(result){
console.log(result)
服务端解密实现（java）
* 解密用户敏感数据
* @param encryptedData 明文
* @param iv
加密算法的初始向量
* @param sessionId
@Api(name = ApiConstant.WX_DECODE_USERINFO)
@RequestMapping(value = "/api/v1/wx/decodeUserInfo", method = RequestMethod.GET, produces = "application/json")
public Map&String,Object& decodeUserInfo(@RequestParam(required = true,value = "encryptedData")String encryptedData,
@RequestParam(required = true,value = "iv")String iv,
@RequestParam(required = true,value = "sessionId")String sessionId){
//从缓存中获取session_key
Object wxSessionObj = redisUtil.get(sessionId);
if(null == wxSessionObj){
return rtnParam(40008, null);
String wxSessionStr = (String)wxSessionO
String sessionKey = wxSessionStr.split("#")[0];
AES aes = new AES();
byte[] resultByte = aes.decrypt(Base64.decodeBase64(encryptedData), Base64.decodeBase64(sessionKey), Base64.decodeBase64(iv));
if(null != resultByte && resultByte.length & 0){
String userInfo = new String(resultByte, "UTF-8");
return rtnParam(0, userInfo);
} catch (InvalidAlgorithmParameterException e) {
e.printStackTrace();
} catch (UnsupportedEncodingException e) {
e.printStackTrace();
return rtnParam(50021, null);
AES解密核心代码
public byte[] decrypt(byte[] content, byte[] keyByte, byte[] ivByte) throws InvalidAlgorithmParameterException {
initialize();
Cipher cipher = Cipher.getInstance("AES/CBC/PKCS7Padding");
Key sKeySpec = new SecretKeySpec(keyByte, "AES");
cipher.init(Cipher.DECRYPT_MODE, sKeySpec, generateIV(ivByte));// 初始化
byte[] result = cipher.doFinal(content);
} catch (NoSuchAlgorithmException e) {
e.printStackTrace();
} catch (NoSuchPaddingException e) {
e.printStackTrace();
} catch (InvalidKeyException e) {
e.printStackTrace();
} catch (IllegalBlockSizeException e) {
e.printStackTrace();
} catch (BadPaddingException e) {
e.printStackTrace();
} catch (NoSuchProviderException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
最后的效果如下:
如果你的小程序没有绑定微信开放平台，解密的数据中不包含unionid参数
从解密的数据看，算得上敏感的数据只有appid；个人觉得openid不是敏感数据，每个用户针对每个公众号会产生一个安全的openid；openid只有在appid的作用域下可用。除非你的appid也泄露了。
那么可以从解密数据得到appid，微信小程序团队是何用意呢？还是前面那句话，openid脱离了appid就什么都不是，openid和appid一起为了方便小程序开发者做到不同小程序应用之间用户区分和隔离，同时能够将微信用户体系与第三方业务体系结合。
所以我认为敏感数据解密的主要用处不是解密后回传给客户端，而是在服务端将微信用户信息融入到自身业务当中。
详细学习请参考：
小程序数据解密：
java解密实现：
相关讨论专题：
你也可以关注我的微信公众号『ITNotes』， 一起交流学习 。
阅读(...) 评论()