微信JSSDK接口 - 图片上传、下载
刚刚做微信上传、下载图片功能的开发，网上得知微信不支持网页上传图片的功能。但是，微信JS-SDK说明文档提供一系列接口用来实现图片上传、预览及下载，其中uploadImage接口用于上传图片，一般和chooseImage接口配合使用，previewImage接口用于预览图片。
由于uploadImage一次只能上传一张图片，因此当用户选择多张图片时，需等前一张图片上传之后再调用该接口，也就是说，如果想要上传多张图片，需要将并行上传改成串行。
|
具体步骤如下： 1、页面加载时需要得到appId、timestamp、nonceStr、signature四个值用来进行权限验证，验证通过后才能上传图片。建议值从后台传入，具体方法参照"微信JSSDK接口-生成签名" 2、点击页面"上传图片"按钮调用uploadImg方法 （1）首先，调用chooseImage接口返回本地图片的localIds列表 （2）之后，调用uploadImage接口返回图片的服务器端serverIds列表 3、得到图片的服务器端serverIds，传到后台用来获取图片(在form表单中设置隐藏input标签，将serverIds值传到后台) 4、后台根据serverIds以及access_token（生成签名时的所使用的调用接口凭证），调用微信"下载多媒体文件"接口获取图片做后续备份、存储 |
图片上传
<!DOCTYPE html>
<html>
<head>
<!--如果页面启用了HTTPS，请务必额外引用第二条JS-->
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<title>上传图片</title>
</head>
<body>
<div class="weui_uploader_input_wrp">
<input type="button" onclick="uploadImg()" value="上传图片">
</div>
<g:form name="myForm" action="myAction">
<input type="hidden" name="serverIds" id="serverIds" value=""/>
<input type="button" value="提交"/>
</g:form>
</body>
</html>
<script>
var appId = "" // 微信平台唯一标识
var timestamp = "" // 生成signature所使用的timestamp
var nonceStr = "" // 生成signature所使用的nonceStr
var signature = "" // 数字签名，生成参照：微信JSSDK接口 - 生成签名
// 后台生成的signature所使用的url应该和它相同
// alert(location.href.split('#')[0])
wx.config({
debug: false,
appId: appId,
timestamp: timestamp,
nonceStr: nonceStr,
signature: signature,
jsApiList: [
"chooseImage", "previewImage", "uploadImage", "downloadImage"
]
});
var serverIds = ""
function uploadImg() {
wx.chooseImage({
count: 9,
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
success: function (res) {
var localIds = res.localIds; // 返回选定照片的本地ID列表
syncUpload(localIds); // localId可作为img标签的src属性显示图片
}
});
}
function syncUpload(localIds) {
var localId = localIds.pop();
wx.uploadImage({
localId: localId, // 需要上传的图片的本地ID，由chooseImage接口获得
isShowProgressTips: 1, // 默认为1，显示进度提示
success: function (res) {
var serverId = res.serverId; // 返回图片的服务器端serverId
serverIds = serverIds + serverId + ",";
$("#serverIds").val(serverIds);
if(localIds.length > 0){
syncUpload(localIds);
} else {
alert("图片上传成功")
}
}
});
};
</script>
图片下载
def uploadImage(String accessToken, String server_id)
{
String requestUrl = "http://file.api.weixin.qq.com/cgi-bin/media/get?access_token=${accessToken}&media_id=${server_id}"
URL url = new URL(requestUrl)
HttpURLConnection conn = (HttpURLConnection) url.openConnection()
conn.setDoInput(true)
conn.setRequestMethod("GET")
def fileType = conn.getHeaderField("Content-Type").split("/")[-1]
BufferedInputStream bis = new BufferedInputStream(conn.getInputStream())
File tempFile = new File("images/wxTempFile.${fileType}")
FileOutputStream fos = new FileOutputStream(tempFile)
byte[] buf = new byte[1024 * 1024]
int size = 0
while ((size = bis.read(buf)) != -1)
{
fos.write(buf, 0, size)
}
}
相关推荐
微信开发入门教程 jssdk,通过config接口注入权限验证配置java+jsp微信开发教程，功能：扫描二维码，拍照、本地选图，图片预览，上传图片，下载图片，获取当前网络状态，查看地理位置，获取当前地理位置打开地图，...
松手后直接结束录音，结束录音后，用户可以选择重新录音、播放刚才的录音，上传录音（这里的上传录音指上传到自己服务器，上传步骤是，前端调用wx.uploadVoice，后台再到微信服务器下载音频文件，上传到自己的服务器...
开发者可以调用`chooseImage`接口来实现这一功能，用户确认选取的照片后，系统会返回图片的本地ID，开发者可以通过`uploadImage`接口上传图片到微信服务器，再通过`previewImage`预览或`downloadImage`下载。...
首先在common.js里封装一个函数，在需要调用jsSDK的页面引用此方法即可实现微信的信息配置 function signatureJSSDK() { var url = [removed].href.split('#')[0];//后台需要此页面的url来生成参数 $.ajax({ ...
调用微信相机、相册接口，进行图片的选择与上传。因为微信接口给的demo使用过程中curl和file_get_contents出错，没有能解决，所以重写了一遍，所有接口请求都是通过file_get_contens接受的信息。放到控制器实例化后...
微信最初为了防止安卓端选图片导致内存泄露的问题而禁止了input file调用手机文件，后来是否开放不太清楚，我写这篇文章的时候微信可以使用input ...只能使用微信提供的接口，详情见微信jssdk，其中有图片接口的示例。
微信开发入门教程 jssdk,通过config接口注入权限验证配置java+jsp微信开发教程，功能：扫描二维码，拍照、本地选图，图片预览，上传图片，下载图片，获取当前网络状态，查看地理位置，获取当前地理位置打开地图，...
在微信平台中实现图片上传功能，主要依赖于微信官方封装的图片上传API接口。本文将详细介绍如何通过这个API进行图片上传，包括API的调用方式、请求参数、返回参数以及可能遇到的错误代码。 首先，我们需要了解微信...
当子页面功能开发完成后，在主页面通过iframe打开子页面，无法调用微信jssdk接口中的选择图片接口，其他jssdk中的接口也无法正常工作。但是单独打开子页面可以正常工作，主页面的微信分享等也是正常的。 解决思路 ...
在微信开发中，微信JSSDK提供了方便的接口来实现多图片上传功能。然而，在实际应用中，尤其是在iOS系统上，可能会遇到图片上传时一直显示加载状态的问题，这给用户体验带来不良影响。本文将深入探讨如何使用微信...
1.JS安全域名配置：登陆微信公众平台：公众号设置 -> 功能设置 -> JS安全域名，域名写到根域名就行，把下载的txt文件放到域名对应的根目录下 2.配置ip白名单 二、微信接口 用到了'startRecord', 'stopRecord', '...
微信公众平台使用JSSDK网页调起扫码并获取扫码数据（PHP）
- 图片素材需要先上传到微信服务器，通过上传接口获取到media_id，然后在朋友圈分享接口中使用。 4. **调用朋友圈分享接口**： - 有了access_token和media_id后，构造分享内容，包括title（标题）、link（链接）...
微信小程序是一种轻量级的应用类型，用户无需下载安装即可在微信内使用，它为开发者提供了丰富的功能接口，如数据管理、用户交互等。 描述中的 "源代码+截图" 提示我们，这个压缩包包含的不仅有实现特定功能的编程...
先调用chooseImage接口让用户选择一张或者多张图片，用户选择完毕后微信会返回被选中图片的id，再把图片id传给uploadImage接口上传图片。 最近做的一个项目，刚好用到了JSSDK，把用到的东西整理下。 先附上微信...
问题场景： 我在A页面有一个表单内容需要使用蓝牙打印机打印，填完表单信息，并通过ajax请求发送到 B文件（PHP）中处理信息，正常通过form表单跳转到B页面后，是可以打印出来的，... //微信提供的接口，只有这么一个回
标题中的“微信jssdk1.4.0”指的是微信官方提供的JavaScript SDK的1.4.0版本。这个SDK主要用于帮助开发者在网页中实现微信相关的功能，如分享、支付、登录等。它提供了丰富的API接口，让开发者可以方便地与微信...
- 图片链接：需要提前通过微信JSSDK的`wx.uploadFile`接口上传图片到微信服务器，获取到返回的图片URL，才能在预览模式中使用。 在提供的文件列表中，我们看到有`index.html`、`1.jpg`、`2.jpg`和`jquery-1.8.3....
本资源集合微信自定义菜单、自动回复、图片上传启用、地图启用、分享朋友圈、分享QQ、分享微博等接口功能的asp.net mvc 方式的实现