项目中，微信利用jweixin进行图片上传

首先，需求是这样的，要在微信端直接调用相册或者是照相机，如果是照相机的话那就利用file里边的 capture = "camera" 属性即可。如果是要直接定位到相册，那么就得用app里边调用硬件里边的相册了。

还好有微信的接口可以用。

微信为开发者提供了一套非常完备的接口：

上图是微信开发js-sdk文档中的部分接口，其中就有专门的图像接口，而且功能十分完备有拍照、从相册选择图片，预览图片，上传图片，下载图片的接口。

实现微信接口上传的第一步便是要获得接口权限。

1．接口权限获得方法

步骤一：绑定域名

先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。如果你使用了支付类接口，请确保支付目录在该安全域名下，否则将无法完成支付。

备注：登录后可在“开发者中心”查看对应的接口权限。

步骤二：引入JS文件

在需要调用JS接口的页面引入如下JS文件，（支持https）： http://res.wx.qq.com/open/js/jweixin-1.0.0.js

请注意，如果你的页面启用了https，务必引入 https://res.wx.qq.com/open/js/jweixin-1.0.0.js ，否则将无法在iOS9.0以上系统中成功使用JSSDK

如需使用摇一摇周边功能，请引入 jweixin-1.1.0.js

备注：支持使用AMD/CMD 标准模块加载方法加载

步骤三：通过config接口注入权限验证配置

所有需要使用JS-SDK的页面必须先注入配置信息

wx.config({

debug: true, // 开启调试模式 , 调用的所有 api 的返回值会在客户端 alert 出来，若要查看传入的参数，可以在 pc 端打开，参数信息会通过 log 打出，仅在 pc 端时才会打印。

appId: '', // 必填，公众号的唯一标识

timestamp: , // 必填，生成签名的时间戳

nonceStr: '',// 必填，生成签名的随机串

signature:'',// 必填，签名，见附录 1

jsApiList: []// 必填，需要使用的 JS 接口列表，所有 JS 接口列表见附录 2

});

其中最重要的一步就是签名生成。签名生成步骤：使用AppID和AppSecret调用本接口来获取access_token，然后用拿到的access_token采用http GET方式请求获得jsapi_ticket

成功返回如下JSON：

{

"errcode":0,

"errmsg":"ok",

"ticket":"bxLdikRXVbTPdHSM05e5u5sUoXNKd8-41ZO3MhKoyN5OfkWITDGgnr2fwJ0m9E8NYzWKVZvdVtaUgWvsdshFKA",

"expires_in":7200

}

获得jsapi_ticket之后，就可以生成JS-SDK权限验证的签名了。

签名生成算法：

（签名生成规则如下：参与签名的字段包括noncestr（随机字符串）, 有效的jsapi_ticket, timestamp（时间戳）, url（当前网页的URL，不包含#及其后面部分）。对所有待签名参数按照字段名的ASCII 码从小到大排序（字典序）后，使用URL键值对的格式（即key1=value1&key2=value2…）拼接成字符串string1。这里需要注意的是所有参数名均为小写字符。对string1作sha1加密，字段名和字段值都采用原始值，不进行URL 转义。）

步骤1. 对所有待签名参数按照字段名的ASCII 码从小到大排序（字典序）后，使用URL键值对的格式（即key1=value1&key2=value2…）拼接成字符串string1

步骤 2. 对 string1 进行 sha1 签名，得到 signature

2. 调用接口实现上传功能

当第一步中 config接口注入权限验证配置完成后便能使用微信提供的接口来实现上传功能了。

[javascript] view plain copy

wx.ready(function(){
// 在这里面调用微信接口
debug: false,
appId: '',
timestamp:’’,
nonceStr: '',
signature: '',
jsApiList: [
//这里是所要调用的接口名称，因为要实现上传，所以调用图像的四个接口
'chooseImage',
'previewImage',
'uploadImage',
'downloadImage',
]
//在这里写具体调用接口的函数
;

完成了这步，我们的图片已经上传到微信的服务器上了，接下来我们要做的是将图片从微信服务器上下载到自己的服务器上。

3.下载上传到微信服务器上的图片到自己服务器

每张图片上传到微信服务器上会自动返回用户一个media_id，用户可以根据所返回media_id来下载图片到自己的服务器上方法为：

[php] view plain copy

$url = "http://file.api.weixin.qq.com/cgi-bin/media/get?access_token=";.$token."&media_id=".$media_id."";
function http_get_data($url) {
$ch = curl_init ();
curl_setopt ( $ch, CURLOPT_CUSTOMREQUEST, 'GET' );
curl_setopt ( $ch, CURLOPT_SSL_VERIFYPEER, false );
curl_setopt ( $ch, CURLOPT_URL, $url );
ob_start ();
curl_exec ( $ch );
$return_content = ob_get_contents ();
ob_end_clean ();
$return_code = curl_getinfo ( $ch, CURLINFO_HTTP_CODE );
return $return_content;
}
$return_content = http_get_data($url);

$return_content中就是图片，然后通过 file_put_contents($file_url,$return_content)将图片放到你想要的地方

这样就完成了图片的上传

四个接口的使用方法：

拍照或从手机相册中选图接口

[javascript] view plain copy

wx.chooseImage({
count: 1, // 默认9
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
success: function (res) {
var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
}

预览图片接口

[javascript] view plain copy

wx.previewImage({
current: '', // 当前显示图片的http链接
urls: [] // 需要预览的图片http链接列表
});

上传图片接口

[javascript] view plain copy

wx.uploadImage({
localId: '', // 需要上传的图片的本地ID，由chooseImage接口获得
isShowProgressTips: 1, // 默认为1，显示进度提示
success: function (res) {
var serverId = res.serverId; // 返回图片的服务器端ID
}
});

下载图片接口

[javascript] view plain copy

wx.downloadImage({
serverId: '', // 需要下载的图片的服务器端ID，由uploadImage接口获得
isShowProgressTips: 1, // 默认为1，显示进度提示
success: function (res) {
var localId = res.localId; // 返回图片下载后的本地ID
}
});

踩的坑：微信的jweixin的js文件已经到了1.2.0版本，否则加载1.0.0版本的话，wx的getLocalImgData方法就没有，那么就不能够生成一个base64的图片。

wx.getLocalImgData({ localId: '', // 图片的localID success: function (res) { var localData = res.localData; // localData是图片的base64数据，可以用img标签显示 } });

上面代码的localId是从选择图片接口返回的参数得来的：

wx.chooseImage({ count: 1, // 默认9 sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有 sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有 success: function (res) { var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片 } });

这里有一个隐藏的bug，就是安卓拿到的localData不是base64编码的字符串。虽然微信接口文档里面说明了此接口仅在 iOS WKWebview 下提供（具体内容可去查看微信jssdk说明文档）

但是难免会遇到将选择上传的图片编码然后再提交到后台的需求。一般的做法都是将图片上传到文件服务器，而不是将图片编码然后一起提交。这种方式存在很多不科学性，但我们这里忽略这个不科学性。

真要这样做时，这里ios和android兼容性就会出现问题。

ios拿到的localData是图片有误的base64编码 data:image/jpg;base64 ，而安卓拿到的localData不仅没有前缀data:image/jpg;base64, 而且拿到的结果也不是base64编码的字符串！！！

这里并不能通过canvas去将获取到的图片编码，因为拿到的路径不是本地图片的路径。

解决办法如下：

安卓对返回的localData再做一次base64编码，再加上编码头部data:image/jpg;base64

注意：

微信头像的接口不能够上传的时候就压缩，而chooseImage方法里头的sizeType: ['original', 'compressed'],是表示上传的时候是不是选择原图，而不是表示上传了图之后再压缩。因为微信没有提供这个判断图片大小的接口。

项目中，微信利用jweixin进行图片上传相关推荐

在ASP.NET项目中使用CKEditor +CKFinder实现图片上传功能
前言之前的项目中一直使用的是FCKeditor,昨天突然有个想法:为什么不试一下新的CKEditor呢?于是花了大半天的时间去学习它的用法,现在把我的学习过程与大家分享一下. 谈起FCKeditor ...
asp如何将图片文件上传到mysql数据库中_怎样才能利用ASP把图片上传到数据库
欢迎来到小编的文章进行学习阅读,想必大家又有很多问题吧,在这里会有你想要收获的答案,请大家慢慢学习吧! ASP(Active Server Pages)是Microsoft很早就推出的一种WEB应用程 ...
uniapp 微信小程序开发图片上传压缩
uniapp 微信小程序开发图片上传压缩安卓上传图片并压缩思路全部代码安卓上传图片并压缩由于后端接口对图片的大小有限制,所以在上传图片是需要压缩处理: uni.chooseImage({c ...
微信朋友圈的图片上传，多图上传怎么去撸才合适？我们一起来实现吧！
微信朋友圈的图片上传,多图上传怎么去撸才合适?我们一起来实现吧! 图片上传是非常常见的功能,而多图上传在大多数应用中也是非常常见的,比如微信的朋友圈,微博的动态,都是有九宫格图片的,那这里肯定涉及了多 ...
php微信小程序多图上传,tp5实现微信小程序多图片上传到服务器功能
最近在做一个教育类的小商城的微信小程序,用到了上传多个图片文件到服务器端,这里做一个讲解,希望对大家有所帮助. 1,小程序端: 在wxml文件中: 删除点击上传作业在js文件中: Page({ / ...
Vue项目中遇到了大文件分片上传的问题
Vue项目中遇到了大文件分片上传的问题,之前用过webuploader,索性就把Vue2.0与webuploader结合起来使用,封装了一个vue的上传组件,使用起来也比较舒爽. 上传就上传吧,为什么 ...
微信小程序多图片上传全栈实战
本篇教程技术栈:springBoot(Java后端)+ 微信小程序.完整的图片上传教程. 页面截图,点击图片右上角按钮可以删除图片. 1.图片上传需要使用wx.uploadFile(Object o ...
微信公众号开发《四》使用微信JS-SDK实现手机图片上传，支持压缩、预览。并下载图片到自身服务器
在这粘贴上三篇博文链接,方便大家查阅互相学习: 微信公众号开发<一>OAuth2.0网页授权认证获取用户的详细信息,实现自动登陆微信公众号开发<二>发送模板消息实现消息业务实 ...
微信企业号开发(七)---图片上传与下载
1.微信企业号图片上传与下载是微信企业号上传临时素材文件中一个小部门,微信企业号上传临时素材文件包括上传图片.语音.视频等媒体资源文件以及普通文件(如doc,ppt),接口返回媒体资源标识ID:med ...

项目中，微信利用jweixin进行图片上传

项目中，微信利用jweixin进行图片上传相关推荐

最新文章

热门文章